Here is a 30 minutes tutorial of HTML for beginners provided by Edureka. It's very easy to get started and begin with creating a live webpage with HTML in just 30 min.
This Edureka video on "HTML Tutorial" will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags. Below are the topics covered in this HTML Tutorial: What is HTML?- 0:20 Structure of HTML- 1:03 Steps to Create a HTML Page- 1:55 Doctype Declaration- 3:33 Head Tag - 4:55 Paragraph Tag- 5:35 Image tag- 5:55 Line break(br) tag – 7:19 Text Style – 7:43 Horizontal line (hr) tag – 8:46 Link – 9:10 Lists – 9:51 Div Tag- 13:09 Forms- 13:45 Tables – 22:44 Blog- 25:31 Subscribe to the Edureka YouTube channel and hit the bell icon to get video updates: https://goo.gl/6ohpTV
Best way to learn HTML as a begginer:
HTML and CSS are very easy to learn and best way to learn is to build small projects. Before starting the project there are few guidelines you should be aware about and must be followed while writing code.
HTML – Hypertext Markup Language :
All critical website content should be added to the website using a markup language such as HTML.
Proper comment section should be used before writing any code because it will help us in identifying why this code has been written and what is the use.
Always add “alt” attributes to images because it will help when an image for some reason cannot be displayed Use lower case element and attribute names.
Use correct document type – Always declare the document type as the first line in your document.
Close all HTML elements and quote the attribute values.
Do not add blank lines & indentation unnecessarily.
Avoid code lines over 80 characters.
Representation of HTML:
CSS – Cascading style sheets:
Presentation of the website content should be defined by a styling language such as CSS. Use simple syntax for linking to style sheets (the type attribute is not necessary) with proper comments.
Place the opening bracket on the same line as the selector
Use one space before the opening bracket
Use two spaces for indentation
Use semicolon after each property-value pair, including the last
Only use quotes around values if the value contains spaces
Place the closing bracket on a new line, without leading spaces
Avoid lines over 80 characters
New file should be used for creating CSS
Representation of CSS:
Class:
If there are multiple elements on a single web page and that need to be styled then we use classes. For example, let’s say that you want to give a redirect a particular button to some site or at the new page or at pressing the button it’s color should be changed. So for modifying colors & redirecting page to some link, we use classes and for that, you could add a class to each of those buttons or the container holding the buttons.
Representation of classes:
CSS/JavaScript custom file:
We are using a framework using different libraries then we should not change the library files instead of that we should create an another file and then do the customization. For example, in bootstrap, we are using a navbar and it contains its own CSS file navbar-default and we are asked to change in that particular file so for that we’ll create a new custom CSS file.
Bootstrap library file:
CSS According Framework:
A framework is defined as a package made up of the structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of the website, as a basis to start building a site. So as to use framework we should place the library along with proper commenting.
Representation of Library:
Single Page CSS:
For every page, there should be separate CSS file and it should contain the information about that particular page only. For example, let’s say there are four pages (Home, About Us, Products Contact Us) so for each and every page there should be separate CSS file with proper commenting and relevant names.
Code Re-usability:
Code which shares a very similar or identical structure should be written in such a way that it can be used further. The aim of code reusability is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, code reusability allows us to cut out much of the work and save a lot of time.
Code Check:
Before submitting the code it should be reviewed and checked properly maintaining the above guidelines rules. It will help understand the third party user easily without facing any difficulties.
In this post, we discuss HTML and CSS guidelines for absolute beginners.
留言