HTML represents the structure of data to be displayed to the user.
Example of text in HTML format and the basic structure of a web page.
<!DOCTYPE html>
<html>
<head>
<title>Basic structure of a web page</title>
</head>
<body>
<h1>This is title</h1>
<p>First paragraph of text.</p>
<p>Second paragraph of text.</p>
<h2>This is subtitle</h2>
<p>Third paragraph of text.</p>
</body>
</html>
Save this file as index.html.
<!DOCTYPE html> is the declaration of a document that indicates to the browser what kind of the document can expect. This declaration defines that the HTML code on the page is according to the HTML5 standards.
Each HTML page is surrounded by HTML tags, <html> </html>. Each page has two parts, the header and body. The header is surrounded by head tags, <head>
</ head>, and body with body tags, <body> </body>.
In HTML, each text is surrounded by the start and end tags. Tags are keywords surrounded by the signa <> and the </>. <> is the start tag, and </> is the end tag. Almost always they should be used in pairs (there are some exceptions, such link and meta elements). Tags give meaning to the content that is contained in them and dictate the manner in which the browser will display it.
<title>Title that is displayed in browser</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- CSS styles that are inserted directly on the page -->
<style type="text/css">
p {color:darkviolet;}
</style>
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
Header of HTML page contains a few elements such as title, meta, link, style, script, noscript. Title element is essential so that a web page is valid, and all others are optional.
Element title contains the text to be displayed as a page title (inscription in tab) of web browser in which the page is open. Title should contain substantially description ie. the purpose of the page, or what somebody should type in the search box in order to come to that page. Title should not be too long, because the search engines take into account only a certain number of characters, and the rest is ignored. The optimal length for search engines is between 55-60 characters.
Note: you should not use the same title for several different pages. In the title highlight why they are unique and which useful information they provide so that they wouldn't counteract with each other for the same criteria.
Meta elements contain information about the document and will not be displayed on the page. These are charset - attribute specifies the character encoding for the HTML document, page description, keyword information, the author of the page. Web search engines such as Google, Bing and Yahoo can use descriptiion meta tag as the description that appears in the listing of search results.
Keyword meta tag which should contain keywords of the page, is no longer so important Google in 2009 excluded the use of keywords meta tag.
Link elements are used for the inclusion of external resources. This element is always empty, contains only attributes and no end tag. In an HTML document can be set up any number of <link> element.
Style elements serve to specify styles within them, by which to define how the content will be displayed. An HTML document may contain more than one <style> element.
Script element is used to store the code, usually JavaScript, which is executed in the browser. This code can be indicated in the script tags <script> </script> or to be included as an external file (js/script.js). If you include it as an external file, script element must be empty and must have a src attribute that points to the location of resource.
Noscript element is used to define the content that will be displayed to users if the scripts are not supported or if their web browser is set to not allow the use of scripts.
<body>
<h1>Basic structure of a web page</h1>
<p>Paragraph of text with a link <a href="second-page.html">to second page</a>.</p>
<p>Paragraph of text <br />with two rows.</p>
<h2>This is subtitle</h2>
<p>Paragraph of text with image <img src="images/mr-logo.png" alt="logo" title="freelance web developer" />.</p>
</body>
The body of HTML page contains structured information that is displayed to the user in a web browser. There are six different HTML headings: h1, h2, h3, h4, h5, h6. Paragraphs may contain plain text or other tags. In this example, you can see <br /> tag, that text wraps to a new row, or <img> tag, which is used for inserting images, or link (to second page) that allows the user to click on text link that leads directly to another page.
Complete code used in examples.
Example of text in HTML format and the basic structure of a web page.
<!DOCTYPE html>
<html>
<head>
<title>Basic structure of a web page</title>
</head>
<body>
<h1>This is title</h1>
<p>First paragraph of text.</p>
<p>Second paragraph of text.</p>
<h2>This is subtitle</h2>
<p>Third paragraph of text.</p>
</body>
</html>
Save this file as index.html.
<!DOCTYPE html> is the declaration of a document that indicates to the browser what kind of the document can expect. This declaration defines that the HTML code on the page is according to the HTML5 standards.
Each HTML page is surrounded by HTML tags, <html> </html>. Each page has two parts, the header and body. The header is surrounded by head tags, <head>
</ head>, and body with body tags, <body> </body>.
In HTML, each text is surrounded by the start and end tags. Tags are keywords surrounded by the signa <> and the </>. <> is the start tag, and </> is the end tag. Almost always they should be used in pairs (there are some exceptions, such link and meta elements). Tags give meaning to the content that is contained in them and dictate the manner in which the browser will display it.
Header of page
<head><title>Title that is displayed in browser</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- CSS styles that are inserted directly on the page -->
<style type="text/css">
p {color:darkviolet;}
</style>
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
Header of HTML page contains a few elements such as title, meta, link, style, script, noscript. Title element is essential so that a web page is valid, and all others are optional.
Element title contains the text to be displayed as a page title (inscription in tab) of web browser in which the page is open. Title should contain substantially description ie. the purpose of the page, or what somebody should type in the search box in order to come to that page. Title should not be too long, because the search engines take into account only a certain number of characters, and the rest is ignored. The optimal length for search engines is between 55-60 characters.
Note: you should not use the same title for several different pages. In the title highlight why they are unique and which useful information they provide so that they wouldn't counteract with each other for the same criteria.
Meta elements contain information about the document and will not be displayed on the page. These are charset - attribute specifies the character encoding for the HTML document, page description, keyword information, the author of the page. Web search engines such as Google, Bing and Yahoo can use descriptiion meta tag as the description that appears in the listing of search results.
Keyword meta tag which should contain keywords of the page, is no longer so important Google in 2009 excluded the use of keywords meta tag.
Link elements are used for the inclusion of external resources. This element is always empty, contains only attributes and no end tag. In an HTML document can be set up any number of <link> element.
Style elements serve to specify styles within them, by which to define how the content will be displayed. An HTML document may contain more than one <style> element.
Script element is used to store the code, usually JavaScript, which is executed in the browser. This code can be indicated in the script tags <script> </script> or to be included as an external file (js/script.js). If you include it as an external file, script element must be empty and must have a src attribute that points to the location of resource.
Noscript element is used to define the content that will be displayed to users if the scripts are not supported or if their web browser is set to not allow the use of scripts.
<body>
<h1>Basic structure of a web page</h1>
<p>Paragraph of text with a link <a href="second-page.html">to second page</a>.</p>
<p>Paragraph of text <br />with two rows.</p>
<h2>This is subtitle</h2>
<p>Paragraph of text with image <img src="images/mr-logo.png" alt="logo" title="freelance web developer" />.</p>
</body>
The body of HTML page contains structured information that is displayed to the user in a web browser. There are six different HTML headings: h1, h2, h3, h4, h5, h6. Paragraphs may contain plain text or other tags. In this example, you can see <br /> tag, that text wraps to a new row, or <img> tag, which is used for inserting images, or link (to second page) that allows the user to click on text link that leads directly to another page.
Complete code used in examples.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.