Second step toward web development:
In my last post i created a simple .html web file and i told you all to delete the website.txt file. Here the the question arise that How will we write further code in our webpage? The answer to that question is simply edit the website.html file for any further changes in your web page code.
How will you edit website.html file???
Just follow the simple steps open the folder that contain your web page file right click on your .html file and left click on the option that say "open with" a drop down list will appear in front of you contain .exe files select the notepad from the list if notepad is not listed in that list then nothing to worry about just select on the last option that say "choose program ... " a window will open and you can select your desired program in which you want to open your file
note: do not check the check box that says "always use this program to open this kind of file"
If you do so if will always open your web page in notepad instead of opening it in your web browser.
Now we will begin with the code
<html>
<head>
<title>
Home
</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:
There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).
Note: The filename and the size of the image are provided as attributes.
The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML documents consist of nested HTML elements.
The example above contains 3 HTML elements.
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
The example above works in most browsers, because the closing tag is
considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
i will guide you about it more in my next post thanks for reading
In my last post i created a simple .html web file and i told you all to delete the website.txt file. Here the the question arise that How will we write further code in our webpage? The answer to that question is simply edit the website.html file for any further changes in your web page code.
How will you edit website.html file???
Just follow the simple steps open the folder that contain your web page file right click on your .html file and left click on the option that say "open with" a drop down list will appear in front of you contain .exe files select the notepad from the list if notepad is not listed in that list then nothing to worry about just select on the last option that say "choose program ... " a window will open and you can select your desired program in which you want to open your file
note: do not check the check box that says "always use this program to open this kind of file"
If you do so if will always open your web page in notepad instead of opening it in your web browser.
<html>
<head>
<title>
Home
</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Page Structure
Below is a visualization of an HTML page structure:Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:
HTML Versions
Since the early days of the web, there have been many versions of HTML:| Version | Year |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page correctly.There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.
Common Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.Example
<a href="http://www.google.com">This is a link</a>
(You will learn about attributes in a later chapter of this tutorial).
HTML Images
HTML images are defined with the <img> tag.Example
<img src="w3schools.jpg" width="104" height="142">
HTML documents are defined by HTML elements.
HTML Elements
An HTML element is everything from the start tag to the end tag:| Start tag * | Element content | End tag * |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm"> | This is a link | </a> |
| <br> |
HTML Element Syntax
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attributes
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML elements).HTML documents consist of nested HTML elements.
HTML Document Example
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
HTML Example Explained
The <p> element:
<p>This is my first paragraph.</p>
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
<p>This is my first paragraph.</p>
</body>
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag
Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
<p>This is a paragraph
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
Empty HTML Elements
HTML elements with no content are called empty elements.<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
i will guide you about it more in my next post thanks for reading
