<html>
<head>
<title> My First Page</title>
</head>
<body>
< h1 > First Page! < /h1 >
<p>First Paragraph!</p >
<p> 2nd Paragraph </p>
</body >
</html>
Whenever we write a web page, the whole of the page is contained between the opening <html> and closing </html> tags.
Inside the < html > element, there are two main parts to the page:
The < head > element:
This contains information about the page.
For example,
It might contain
- a title and
- a description of the page, or
- instructions on where a browser can find CSS rules that explain how the document should look.
It consists of the opening < head > tag, the closing < /head > tag, and everything in between.
The < body > element:
This contains the information.
We actually see in the main browser window.
It consists of the opening < body > tag, closing </body> tag, and everything in between.
Together, the < html > , < head > , and < body > elements make up the skeleton of a document.
Inside the < head > element of the first example page, you can see a < title > element:
< head >
<title> My First Page</title>
< /head >
<title> Tag for the Title of Document's Page.
It's displayed on the right at the top of the browser (Such as Firefox, Chrome) window.
- It is also the name browsers use when you save a page in your favorites, and
- It helps search engines understand what your page is about.
The real content of your page is held in the <body> element, which is what you want users to read, and this is shown in the main browser window.
The < head > element contains information about the document, which is not displayed within the main page itself.
The < body > element holds the actual content of the page that is viewed in your browser.
📝 Just remember !
An element that contains another element is known as the parent, while the element that’s between the parent element’s opening and closing tags is called a child of that element.
So, the < title > element is a child of the < head > element, the < head > element is the parent of the < title > element, and so on.
Furthermore, the < title > element can be thought of as a grandchild of the < html > element.
Basic text formatting elements :
Heading: <h1> , <h2> , <h3> , <h4> , <h5> , <h6>
Paragraph: <p> ,
Line Break: < br / > ,
<pre>
White Space and Flow
If we put several consecutive spaces between two words, by default, only one space will be displayed. This is known as white space collapsing .
Similarly, if you start a new line in your source document, or you have consecutive empty lines, these will be ignored and simply treated as one space, as will tab characters.
< p > This paragraph shows how multiple spaces between words are treated as a single space. This is known as white space collapsing, and the big spaces between some of the words will not appear in the browser.
It also demonstrates how the browser will treat multiple carriage returns (new lines) as a single space, too. < /p >
As the browser treats the multiple spaces and several carriage returns (where text appears on a new line) as if there were only one single space. It also allows the line to take up the full width of the browser window.
Structuring Documents for the Web
Creating Headings Using <hn>Elements
Heading indicate titles and subtitles within webpages to help structure and organize content, which can help search engines and readers understand and navigate the page.
These tags range from <h1> to <h6> (< h1 > , < h2 > , < h3 > , < h4 > , < h5 > , and < h6 >).
The <h1> should be the page title that reflects the main topic,
<h2> should be the most important subtopics, and so on.
Browsers display the <h1> element as the largest of the six and <h6> as the smallest.
Most browsers display the contents of the < h1 > , < h2 > , and < h3 > elements larger than the default size of text in the document.
The content of the < h4 > element would be the same size as the default text, and the content of the < h5 > and < h6 >elements would be smaller unless you instruct them otherwise using CSS.
Creating Paragraphs Using the <p>Element
The < p > element offers another way to structure your text.
Each paragraph of text should go in between an opening < p > and closing < /p > tag -
< p > Here is a paragraph of text. < /p >
< p > Here is a second paragraph of text. < /p >
< p > Here is a third paragraph of text. < /p >
When a browser displays a paragraph, it usually inserts a new line before the next paragraph and adds a little bit of extra vertical space.
Creating Line Breaks Using the <br/> Element
It starts on the next line.
The <br/> element is an example of an empty element ; you don ’ t need opening and closing tags, because there is nothing to go in between them.
Note that the < br / > element has a space between the characters br and the forward slash.
You will often see these written like so: < br > , which is the way it was written in earlier versions of HTML, but in XHTML the characters < br are followed by a space and a forward slash before the closing angled bracket.
< p > When you want to start a new line you can use the line break element.
So, the next < br / > word will appear on a new line. < /p >
Creating Preformatted Text Using the < pre >Element
The HTML <pre> tag defines preformatted text.
Browsers naturally collapse multiple spaces or line breaks into a single space, but text inside a <pre> element is displayed exactly as it is written in the HTML source code.
It preserves all spaces, tabs, and line breaks automatically.
Content defaults to a fixed-width (monospaced) font, like Courier.
The most common uses of the < pre > element are to represent computer source code. For example,
< pre >
function testFunction(strText){
alert (strText)
}
< /pre >
The < hr / > Element
The < hr / > element creates a horizontal rule across the page. It is an empty element.
This is frequently used to separate distinct sections of a page where a new heading is not appropriate.
No comments:
Post a Comment
Thank you to visit Bapi's Page.