Practical 2
Basic HTML Structure
Objective:
To create a basic HTML document and understand its fundamental
structure.
Outcome:
By completing this lab exercise, you will have created a
structured HTML document with essential elements, gaining practical experience
in organizing content using headings, paragraphs, sections, and navigation
links. This exercise lays a solid foundation for understanding HTML's structure
and prepares you for more advanced web development tasks.
HTML Elements
An HTML element is defined by a start tag, some content, and an
end tag.
The HTML element is everything from the start tag to the end tag:
Syntax:
<tagname>Content goes here...</tagname>
Examples:
<h1>My
First Heading</h1>
<p>My
first paragraph.</p>
Start tag Element content End tag
<h1> My First
Heading </h1>
<p> My first paragraph. </p>
<br> none none
Empty elements:
Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not have an end
tag!
Nested HTML Elements
1. HTML elements can be nested (this means that elements can contain
other elements).
2. All HTML documents consist of nested HTML elements.
3. The following example contains four HTML elements (<html>,
<body>, <h1> and <p>):
Example
|
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
Example Explained
- The
<html> element is the root element and it defines the whole HTML
document.
- It
has a start tag <html> and an end tag </html>.
- Then,
inside the <html> element there is a <body> element:
<body>
<h1>My
First Heading</h1>
<p>My
first paragraph.</p>
</body>
The
<body> element defines the document's body.
It has
a start tag <body> and an end tag </body>.
- Then,
inside the <body> element there are two other elements: <h1>
and <p>:
<h1>My
First Heading</h1>
<p>My
first paragraph.</p>
The
<h1> element defines a heading.
It has
a start tag <h1> and an end tag </h1>:
<h1>My
First Heading</h1>
The
<p> element defines a paragraph.
It has
a start tag <p> and an end tag </p>:
<p>My
first paragraph.</p>
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the
end tag:
Example5.html
|
<html> <body> <p>This is a paragraph <p>This is a paragraph </body> </html>
|
However, never rely on this! Unexpected results and errors may occur if you forget the end tag!
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element
without a closing tag:
Example
<p>This is a <br> paragraph with a line
break.</p>
HTML Case Sensitive
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as
<p>.
The HTML standard does not require lowercase tags, but W3C
recommends lowercase in HTML, and demands lowercase for stricter document types
like XHTML.
Assignment 1: Open your text editor and create a new file. Save it as index.html.
Write the basic HTML structure:
|
<!DOCTYPE
html> <html> <head> <title>My
First HTML Page</title> </head> <body> <h1>Welcome
to My First HTML Page</h1> <p>This
is a paragraph of text.</p> </body> </html>
|
Save and view your HTML document:
Save the file and open it in a web browser. You should see a heading and a paragraph.
Explanation:
- <!DOCTYPE html>: Declares the document type and version of HTML.
- <html>: The root element of an HTML page.
- <head>: Contains meta-information about the HTML document, such as the title.
- <title>: Sets the title of the HTML document, which appears in the browser's title bar or tab.
- <body>: Contains the content of the HTML document, including text, images, and other elements.
basic_structure.html
Create a new file named basic_structure.html using a text editor (e.g., Notepad, Visual Studio Code, Sublime Text).
Build the basic structure of your HTML document:
|
<!DOCTYPE
html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Basic
HTML Structure</title> </head> <body> <header> <h1>Welcome
to My Website</h1> <nav> <ul> <li><a
href="#about">About</a></li> <li><a
href="#services">Services</a></li> <li><a
href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section
id="about"> <h2>About
Us</h2> <p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac feugiat dolor,
vitae placerat libero.</p> </section> <section
id="services"> <h2>Our
Services</h2> <ul> <li>Web
Design</li> <li>Graphic
Design</li> <li>SEO
Optimization</li> </ul> </section> </main> <footer
id="contact"> <p>©
2024 MyWebsite. All rights reserved.</p> </footer> </body> </html> |
Save the file and open it in a web browser to view your web page (basic_structure.html).
Detailed Explanation:
HTML Structure:
ü <!DOCTYPE html>: Defines the document type and version of HTML (HTML5 in this case).
ü <html lang="en">: Root element that wraps the entire content of the HTML document, specifying the document's language.
ü <head>: Contains meta-information about the HTML document, such as character set, viewport settings, and page title.
ü <meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 supports most characters worldwide).
ü <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to the width of the device and initial zoom level (for responsive design).
ü <title>: Sets the title of the HTML document, displayed in the browser's title bar or tab.
ü <body>: Contains the content visible to users, such as headings, paragraphs, images, links, etc.
ü <header>: Contains introductory content or navigation links for the website.
ü <nav>: Defines a section of navigation links. Often used within a <header> or <footer>.
ü <main>: Represents the main content of the <body> section of an HTML document. Typically contains unique content directly related to the central theme of the document.
ü <section>: Defines a section in a document. Used to group together related content and typically includes a heading (<h2> in this case).
ü <footer>: Defines a footer for a document or section. Typically contains authorship information, copyright details, links to related documents, etc.
ü Semantic HTML: Use semantic elements (<header>, <nav>, <main>, <section>, <footer>) to provide meaning to the structure of your HTML document.
ü Links (<a>): Use the <a> tag with the href attribute to create navigation links (<a href="#about">About</a>) that link to specific sections within the same page.
Home Tasks:
Enhance your page by:
Adding more sections (<section>) and subsections (<h3>, <h4>) to organize and structure your content effectively.
Applying CSS styles to customize the appearance of headings, paragraphs, and navigation elements.
Experiment with:
Inserting images (<img>) to illustrate your content.
Creating lists (<ul>, <ol>) to present information in a structured format.
HTML Attributes
1.
All HTML elements can have
attributes
2. Attributes provide additional information about elements
3. Attributes are always specified in the start tag
4. Attributes usually come in name/value pairs like: name="value"
1. The href Attribute
- The
<a> tag defines a hyperlink.
- The
href attribute specifies the URL of the page the link goes to:
Example
<a
href="https://www.w3schools.com">Visit W3Schools</a>
2. The src Attribute
- The
<img> tag is used to embed an image in an HTML page.
- The
src attribute specifies the path to the image to be displayed:
Example
<img
src="img_girl.jpg">
There are two
ways to specify the URL in the src attribute:
1. Absolute
URL - Links to an external image that is hosted on another website.
Example:
src="https://www.w3schools.com/images/img_girl.jpg".
Notes:
External images might be under copyright. If you do not get permission to use
it, you may be in violation of copyright laws. In addition, you cannot control
external images; it can suddenly be removed or changed.
2. Relative
URL - Links to an image that is hosted within the website. Here, the URL does
not include the domain name. If the URL begins without a slash, it will be
relative to the current page.
Example:
src="img_girl.jpg". If the URL begins with a slash, it will be
relative to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you
change domain.
3. The
width and height Attributes
- The
<img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels).
Example
<img src="img_girl.jpg" width="500"
height="600">
4. The alt Attribute
- The
required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This can
be due to a slow connection, or an
error in the src attribute, or if the user uses a screen reader.
Example
<img
src="img_girl.jpg" alt="Girl with a jacket">
Example
See what
happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
5. The style Attribute
- The
style attribute is used to add styles to an element, such as color, font,
size, and more.
Example
<p style="color:red;">This is a red
paragraph.</p>
6. The lang Attribute
- You
should always include the lang attribute inside the <html> tag, to
declare the language of the Web page.
- This
is meant to assist search engines and browsers.
Example 1:
The following
example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes
can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters
define the country.
Example 2: The
following example specifies English as the language and United States as the
country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
You can see all the language codes in our HTML Language Code Reference.
<!DOCTYPE html><html lang="en-US">
<body>
...
</body>
</html>
. The title Attribute
- The
title attribute defines some extra information about an element.
- The
value of the title attribute will be displayed as a tooltip when you mouse
over the element:
Example
<p title="I'm a tooltip">This is a
paragraph.</p>
Single or
Double Quotes?
Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it
is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
HTML Headings
1.
HTML headings are titles or
subtitles that you want to display on a webpage.
2. HTML headings are defined with the <h1> to <h6> tags.
3. <h1> defines the most important heading. <h6> defines
the least important heading.
Example
<h1>Heading
1</h1>
<h2>Heading
2</h2>
<h3>Heading
3</h3>
<h4>Heading
4</h4>
<h5>Heading
5</h5>
<h6>Heading
6</h6>
Note: Browsers
automatically add some white space (a margin) before and after a heading.
Headings
Are Important
Search engines
use the headings to index the structure and content of your web pages.
Users often
skim a page by its headings. It is important to use headings to show the
document structure.
<h1>
headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.
Note: Use HTML
headings for headings only. Don't use headings to make text BIG or bold.
Bigger
Headings
Each HTML
heading has a default size. However, you can specify the size for any heading
with the style attribute, using the CSS font-size property:
<h1
style="font-size:60px;">Heading 1</h1>