HTML is simply a markup language for describing web pages. HTML stands for Hyper Text Markup Language.
There is a less demanding option than writing the HTML code yourself. You can use a web page editor (Microsoft FrontPage, Dreamweaver etc.) to create a web page. All you need to do is to type the content, insert images or any other graphics and save the document as HTML file. The HTML code will be generated in the background by the software. This is a very easy option, however, the result you can achieve this way are limited. In order to create a professional looking, well designed and dynamic website you need to understand the HTML code very well.
Why you should know how to write HTML code:
- To design professional websites and maintain the code in an immaculate manner;
- To design dynamic websites which requires programmatically generated code;
- To design websites which include forms to send information.
In this part we are going to explore HTML code in more depth, syntax, basic page setup, tags and attributes as well as the basic rules.
HTML Guidelines
Despite a wide variety of coding styles used in website, it would be beneficial for you to follow some guidelines while building your website:
- Use lowercase for all your tags and attributes;
- Use quotes for values, all attribute values should be placed in between quotation marks;
- Maintain proper spacing - a single space between elements and their attributes and no space between a tag and the brackets;
- Nest correctly - while placing one HTML document inside of another and always close the most recently opened element before closing another.
HTML element structure:
<element name> Text/HTML element </element name>
As shown in the picture above element name appears in the opening tag <element name> and the closing tag </element name> within the angle brackets (preceded by a slash in a closing tag). Usually it is an abbreviation of a longer descriptive name. The browser reading HTML document knows that anything in the brackets is HTML code and should not be displayed in the browser window.
Elements define the semantic meaning of their content, sometimes very specific - 'Image', 'Heading' or 'Order list' or more general - 'part of the text', 'section on the page'.
HTML Tags
Everything written between the brackets <> is recognized as Tag and is not displayed on the web page. The Tags added around the content are referred to as Markup.
Example:
<p>This is my first web page</p>
HTML Attributes
Attributes are the instructions that modify or clarify an element and they are placed after the opening tag. They usually contain two elements:
- An attribute name
- An attribute value
Example:
<a href="your URL goes here">Links name goes herek</a>
This is an example of HTML link, which is defined with the <a> tag, 'href' is the attribute used to specify the hypertext reference of the linked page and the link address is its value.
Basic Document Structure
HTML elements can form a hierarchic structure on the page - one element may contain other. Let's have a look at the following example of HTML code which shows the basic elements to build your web page:
<html>
<head>
<title>My first web page</title>
</head>
<body>
The content of my first web page.
</body>
</html>
As you can see the page starts with <html> which tells the browser that everything within <html> is HTML code. We have two main sections within the <html >, namely <head> which defines the heading of the document and includes <title> shown on your web page, and <body> which is the key are of any HTML file, as it contains the actual content displayed on your web page.
Structuring the content
The very first steps when structuring the content is to identify contend divisions you want to have on your web page, for example - 'Navigation', 'Main Text', 'Secondary Text', 'Footer' etc. If were to code that, it would look like this:
Example
<div id="navigation">
This is where your navigation goes.
</div>
<div id="Main Text">
This is where the main section of your text goes.
</div>
<div id="Secondary Text">
This is where the secondary section of your text goes.
</div>
<div id="Footer">
This is where your Footer goes.
</div>
When you have designed the page and identified the divisions using div element and id attribute, you can place the rest of the content inside the div elements.
Paragraphs
The main and most common component of the text is a Paragraph, and as you already know we use p to mark it. This is how you include it in your division:
<div id="Main Text">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Paragraphs in your text will help readability and, by default browsers automatically insert the blank line between all <p> elements.
Headings
Heading is a second most common element inside content areas. In HTML, there are 6 heading elements. They are categorized to identify different levels of importance, where <h1> indicates the most important heading and <h6> the least important.
Let's add the heading to our division.
<div id="Main Text">
<h1>The most important heading</h1>
<p>Paragraph 1</p>
<h2>Less important heading</h2>
<p>Paragraph 2</p>
</div>
Lists
The last strictly textual element of the content in HTML is a list, which helps to present information in neat and clarified manner. In HTML we recognize two types of lists - ordered list <ol> and unordered list <ul>. In both, the individual items are contained in between opening and closing <li> - (short for list item). To illustrate both list lets include them in HTML code:
<html>
<div id="Main Text">
<h1>The most important heading</h1>
<p>Paragraph 1</p>
<ol>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ol>
<h2>Less important heading</h2>
<p>Paragraph 2</p>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div>
</html>
Now, if you save the document as html file, for example 'Page with divisions.html' and then open in your browser, you will see a simple web page with all the elements we have just talked about. Try it!
In this tutorial, we have covered basic elements of HTML code as well as how to structure textual content on a web page.
Some credit to.
There is a less demanding option than writing the HTML code yourself. You can use a web page editor (Microsoft FrontPage, Dreamweaver etc.) to create a web page. All you need to do is to type the content, insert images or any other graphics and save the document as HTML file. The HTML code will be generated in the background by the software. This is a very easy option, however, the result you can achieve this way are limited. In order to create a professional looking, well designed and dynamic website you need to understand the HTML code very well.
Why you should know how to write HTML code:
- To design professional websites and maintain the code in an immaculate manner;
- To design dynamic websites which requires programmatically generated code;
- To design websites which include forms to send information.
In this part we are going to explore HTML code in more depth, syntax, basic page setup, tags and attributes as well as the basic rules.
HTML Guidelines
Despite a wide variety of coding styles used in website, it would be beneficial for you to follow some guidelines while building your website:
- Use lowercase for all your tags and attributes;
- Use quotes for values, all attribute values should be placed in between quotation marks;
- Maintain proper spacing - a single space between elements and their attributes and no space between a tag and the brackets;
- Nest correctly - while placing one HTML document inside of another and always close the most recently opened element before closing another.
HTML element structure:
<element name> Text/HTML element </element name>
As shown in the picture above element name appears in the opening tag <element name> and the closing tag </element name> within the angle brackets (preceded by a slash in a closing tag). Usually it is an abbreviation of a longer descriptive name. The browser reading HTML document knows that anything in the brackets is HTML code and should not be displayed in the browser window.
Elements define the semantic meaning of their content, sometimes very specific - 'Image', 'Heading' or 'Order list' or more general - 'part of the text', 'section on the page'.
HTML Tags
Everything written between the brackets <> is recognized as Tag and is not displayed on the web page. The Tags added around the content are referred to as Markup.
Example:
<p>This is my first web page</p>
HTML Attributes
Attributes are the instructions that modify or clarify an element and they are placed after the opening tag. They usually contain two elements:
- An attribute name
- An attribute value
Example:
<a href="your URL goes here">Links name goes herek</a>
This is an example of HTML link, which is defined with the <a> tag, 'href' is the attribute used to specify the hypertext reference of the linked page and the link address is its value.
Basic Document Structure
HTML elements can form a hierarchic structure on the page - one element may contain other. Let's have a look at the following example of HTML code which shows the basic elements to build your web page:
<html>
<head>
<title>My first web page</title>
</head>
<body>
The content of my first web page.
</body>
</html>
As you can see the page starts with <html> which tells the browser that everything within <html> is HTML code. We have two main sections within the <html >, namely <head> which defines the heading of the document and includes <title> shown on your web page, and <body> which is the key are of any HTML file, as it contains the actual content displayed on your web page.
Structuring the content
The very first steps when structuring the content is to identify contend divisions you want to have on your web page, for example - 'Navigation', 'Main Text', 'Secondary Text', 'Footer' etc. If were to code that, it would look like this:
Example
<div id="navigation">
This is where your navigation goes.
</div>
<div id="Main Text">
This is where the main section of your text goes.
</div>
<div id="Secondary Text">
This is where the secondary section of your text goes.
</div>
<div id="Footer">
This is where your Footer goes.
</div>
When you have designed the page and identified the divisions using div element and id attribute, you can place the rest of the content inside the div elements.
Paragraphs
The main and most common component of the text is a Paragraph, and as you already know we use p to mark it. This is how you include it in your division:
<div id="Main Text">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Paragraphs in your text will help readability and, by default browsers automatically insert the blank line between all <p> elements.
Headings
Heading is a second most common element inside content areas. In HTML, there are 6 heading elements. They are categorized to identify different levels of importance, where <h1> indicates the most important heading and <h6> the least important.
Let's add the heading to our division.
<div id="Main Text">
<h1>The most important heading</h1>
<p>Paragraph 1</p>
<h2>Less important heading</h2>
<p>Paragraph 2</p>
</div>
Lists
The last strictly textual element of the content in HTML is a list, which helps to present information in neat and clarified manner. In HTML we recognize two types of lists - ordered list <ol> and unordered list <ul>. In both, the individual items are contained in between opening and closing <li> - (short for list item). To illustrate both list lets include them in HTML code:
<html>
<div id="Main Text">
<h1>The most important heading</h1>
<p>Paragraph 1</p>
<ol>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ol>
<h2>Less important heading</h2>
<p>Paragraph 2</p>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div>
</html>
Now, if you save the document as html file, for example 'Page with divisions.html' and then open in your browser, you will see a simple web page with all the elements we have just talked about. Try it!
In this tutorial, we have covered basic elements of HTML code as well as how to structure textual content on a web page.
Some credit to.
No comments:
Post a Comment