HTML docs are simply text files in which extra tags have been added within angle brackets, like this: <head>.
So, for example, the tag <i> tells the Web browser that all the following text should be displayed using an italic font.
And when a </i> is encountered, the preceding slash (/) character tells the browser to disable the italics.
Example:
The <b>fox</b> jumps over the <i>dog</i>.
The result looks like this:
The fox jumps over the dog.
So, for example, the tag <i> tells the Web browser that all the following text should be displayed using an italic font.
And when a </i> is encountered, the preceding slash (/) character tells the browser to disable the italics.
Example:
The <b>fox</b> jumps over the <i>dog</i>.
The result looks like this:
The fox jumps over the dog.
Tag Attributes
Many of the tags either support or require the use of attributes. These are arguments that you pass alongside the tag to provide further information to the web browser.
Generally an attribute consists of an attribute name followed by the = sign and then either single or double quotation marks enclosing a value.
Example (creating a hyperlink):
Using the <a> tag (which stands for anchor), like this:
<a href='http://google.com'>Visit Google</a>
Displays simply as:
Visit Google
Note:-
In HTML tags you can generally use single or double quotation marks interchangeably.
Wherever possible, though, I tend to use single quotes because I don't need to press shift key to type them in.
Also there are sometimes occasions when you need two levels of nested quotes.
Many of the tags either support or require the use of attributes. These are arguments that you pass alongside the tag to provide further information to the web browser.
Generally an attribute consists of an attribute name followed by the = sign and then either single or double quotation marks enclosing a value.
Example (creating a hyperlink):
Using the <a> tag (which stands for anchor), like this:
<a href='http://google.com'>Visit Google</a>
Displays simply as:
Visit Google
Note:-
In HTML tags you can generally use single or double quotation marks interchangeably.
Wherever possible, though, I tend to use single quotes because I don't need to press shift key to type them in.
Also there are sometimes occasions when you need two levels of nested quotes.
The <!DOCTYPE> Declaration
All well-formatted HTML pages begin with a line that tells the browser information about the type of content to expect.
This line consists of the <!DOCTYPE> declaration, along with some arguments if the HTML version is LESS than 5.
All well-formatted HTML pages begin with a line that tells the browser information about the type of content to expect.
This line consists of the <!DOCTYPE> declaration, along with some arguments if the HTML version is LESS than 5.
The <html> Tag
Within a pair of <html> tags, there are generally two other tags used to contain the header and body text of the document.
These are <head> & <body>.
Within a pair of <html> tags, there are generally two other tags used to contain the header and body text of the document.
These are <head> & <body>.
The <head> Tag Indicates that the HTML within it and its closing </head> Tag contains further information about the document such as its title, metadata, style sheets, and Java Script.
Eg:
<head>
<title> Welcome to my website</title>
</head>
Eg:
<head>
<title> Welcome to my website</title>
</head>
Including Style Sheet
Cascading style sheet (CSS) are sets of rules used to describe the layout and presentation of an HTML document, which are kept separately from the content.
There are different ways of incorporating CSS rules in a document, including embedding them within the text, or as a set of rules within the <head> section of HTML document using <style> & </style> tags, like the following (which tells the browser to display all Level 1 headings):
<style>
h1 { color:red; }
</style>
Or by saving all the CSS rules in a separate document, you can simply include a single line in the <head> of a document to include them. The latter is the preferred method of most developers, and you perform it using the <link> tag, like this:
<link rel= 'stylesheet' href='styles.css' type='text/css'>
Cascading style sheet (CSS) are sets of rules used to describe the layout and presentation of an HTML document, which are kept separately from the content.
There are different ways of incorporating CSS rules in a document, including embedding them within the text, or as a set of rules within the <head> section of HTML document using <style> & </style> tags, like the following (which tells the browser to display all Level 1 headings):
<style>
h1 { color:red; }
</style>
Or by saving all the CSS rules in a separate document, you can simply include a single line in the <head> of a document to include them. The latter is the preferred method of most developers, and you perform it using the <link> tag, like this:
<link rel= 'stylesheet' href='styles.css' type='text/css'>
Incorporating JavaScript
Java Script is included within a web page by either including a section within <script> and </script> tags, or by adding an src attribute to the <script> tag to load in an external file.
For example, the following HTML specifies a script that is embedded within <script> tags:
<script>
alert('This is a Java script pop-up alert')
</script>
Above Eg can be placed almost anywhere within an HTML document, but will most often find script in the <head> section of web pages, so that they load in and execute before the body of a document.
If scripts are longer than a few lines, they will often be saved as external files that are then loaded in as follows:
<script src= 'ProgramCode. js'></script>
Java Script is included within a web page by either including a section within <script> and </script> tags, or by adding an src attribute to the <script> tag to load in an external file.
For example, the following HTML specifies a script that is embedded within <script> tags:
<script>
alert('This is a Java script pop-up alert')
</script>
Above Eg can be placed almost anywhere within an HTML document, but will most often find script in the <head> section of web pages, so that they load in and execute before the body of a document.
If scripts are longer than a few lines, they will often be saved as external files that are then loaded in as follows:
<script src= 'ProgramCode. js'></script>
Passing Metadata
It is possible to provide addition info to an HTML doc that the browser can use (if it understand it). Such data is sent using the <meta> tag.
For Eg, you can tell a browser to exchange the current page for another one after a set length of time, like this :
<meta http-equiv='refresh' content='10; url=http://othersite.com'>
This meta command uses the http-equiv attribute with the value of refresh to tell the browser that a refresh is being requested. The content attribute has the value 10; url=http://othersite.com, which states that after 10 seconds the Web page at http://othersite.com should replace the current one. Note that this is an empty tag (known as a void element) that contains no content and does not make use of a </meta> tag to close it.
Other uses of the <meta> tag include setting the width of the document for portable browsing hardware such as phones and tablets. This is done using the viewport value, and a common width you see used is 960 pixels.
Devices of differing resolutions will then render at that width but then zoom in and out, or rescale as necessary to enable your pages to display at their best.
So, for Eg, to specify a doc width of 960 pixels, you might use the following tag :
<meta name='viewport' content='width=960'>
Possible two other versions of the <meta> Tag for declaring keywords and description for a Web page, like this:
<meta name='keywords' content='keyword1, keyword2, keyword3, etc'>
<meta name='description' content='Description of Web page'>
These used to be very important for search engine ranking, and while less so these days due to smarter Web crawlers, they are used by some search engines and indexes and may be worth including on your Web pages.
It is possible to provide addition info to an HTML doc that the browser can use (if it understand it). Such data is sent using the <meta> tag.
For Eg, you can tell a browser to exchange the current page for another one after a set length of time, like this :
<meta http-equiv='refresh' content='10; url=http://othersite.com'>
This meta command uses the http-equiv attribute with the value of refresh to tell the browser that a refresh is being requested. The content attribute has the value 10; url=http://othersite.com, which states that after 10 seconds the Web page at http://othersite.com should replace the current one. Note that this is an empty tag (known as a void element) that contains no content and does not make use of a </meta> tag to close it.
Other uses of the <meta> tag include setting the width of the document for portable browsing hardware such as phones and tablets. This is done using the viewport value, and a common width you see used is 960 pixels.
Devices of differing resolutions will then render at that width but then zoom in and out, or rescale as necessary to enable your pages to display at their best.
So, for Eg, to specify a doc width of 960 pixels, you might use the following tag :
<meta name='viewport' content='width=960'>
Possible two other versions of the <meta> Tag for declaring keywords and description for a Web page, like this:
<meta name='keywords' content='keyword1, keyword2, keyword3, etc'>
<meta name='description' content='Description of Web page'>
These used to be very important for search engine ranking, and while less so these days due to smarter Web crawlers, they are used by some search engines and indexes and may be worth including on your Web pages.
The <body> tag
Any content within a pair of <body> and </body> tags will be display in Web browsers
Any content within a pair of <body> and </body> tags will be display in Web browsers
TEXT EMPHASIS
Bold = <b>... </b>
Strike through = <del>... </del>
Italics = <i>... </i>
Subscript = <sub>... </sub>
Superscript = <sup>... </sup>
Underlined = <u>... </u>
Bold = <b>... </b>
Strike through = <del>... </del>
Italics = <i>... </i>
Subscript = <sub>... </sub>
Superscript = <sup>... </sup>
Underlined = <u>... </u>
👍1