Submodule 1.3: Simple HTML file
Submodule 1.3: Simple HTML file
- Simple web page
- Headings and paragraphs
- Text formatting
- Types of break
Headings and paragraphs
HTML headings
HTML has six headings : <h1>, <h2>,<h3>,<h4>,<h5> and <h6>.
Different headings have different importance and different size.
<h1> is the bigger and most important heading whereas <h6> is the smaller and less important heading.
Thus the order is: <h1> > <h2> > <h3> > <h4> > <h5> > <h6>.
It is important to use headings to represent the document structure. For example the main title should be within an <h1> tag, a title within <h2> tag and a subtitle will be within an <h3> tag.
Here we should note, that as described in the word, headings should be used only for headings. You should not use headings to make words bigger. Later in the course, we will learn how to make words appear bigger.
HTML Paragraphs
Paragraphs in an HTML are defined by the <p> element. Paragraphs are used within the <body> element and have a start <p>and an end tag. </p>.
It is important to note that by default, browsers leave some white space before and after a paragraph so that it is distinct from neighboring paragraphs. Every paragraph starts at a new line. Inside the <p> element you cannot format the appearance of your content by applying extra whitespaces or line breaks within a paragraph. Browser will remove these from the displaying page.
Example
Exercise
- Open your editor and the file
exersice01.3.01.html - Save the file as
exersice01.3.02.html, in the folder "Exercises" - Copy the above code, paste it into the new file and save it
- Preview this page in your browser
- Add in your editor a new
<h5>element and a new<p>element. You can use Lorem ipsum, the pseudo-Latin text - Save and preview it in your browser
Add empty space in your new paragraph and save the file. What do you see in your browser?
