Scribd
Upload
19 views15 pages

Roles of an is Mgt (1)

Ohhahahha

Uploaded by

benzogenius38
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views15 pages

Roles of an is Mgt (1)

Ohhahahha

Uploaded by

benzogenius38
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Internet Technology and Web Design (BIT122/BS)

Lecturer: Nkoloogi Blasius


Email: [email protected]
Tel No: 0757886712

WEEK 2
Objectives:

● Understand the basic structure of an HTML document.


● Learn about essential HTML tags and elements.
● Practice creating a simple web page using HTML.
● Get familiar with HTML5 features.

Materials Needed:

Computer with a text editor (e.g., Notepad++, VS Code) and a web browser.

Outline:

Introduction to HTML
Definition and Purpose
What is HTML?

Its the standard language for creating web pages. It provides the structure
and content of a webpage.

The role of HTML in web development.

HTML is used to define headings, paragraphs, links, images, and other


elements on a web page.

HTML Document Structure


Basic syntax and structure of an HTML document.
★ Every HTML document starts with the <!DOCTYPE html>
declaration to specify the document type and version of HTML
(HTML5).
★ <html> is the root element that contains the entire HTML
document.
★ <head> contains meta-information about the document (title,
character set, links to stylesheets).
★ <title> specifies a title for the HTML page
★ <body> contains the actual content that is displayed on the web
page.
Overview of <!DOCTYPE>, <html>, <head>, and <body> tags.

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a paragraph.</p>

</body>

</html>
HTML Page Structure

Basic HTML Tags


Headings and Paragraphs
<h1> to <h6> for headings. <h1> is the largest and <h6> is the smallest.
<p> for paragraphs. It separates text into distinct blocks.
Text Formatting
Bold (<b>, <strong>), Italic (<i>, <em>), Underline (<u>). Implies
importance

<b>This is bold text.</b>

<strong>This is strong text.</strong>


<p>You <em>have</em> to hurry up!</p>

<p>We <i>cannot</i> keep it!</p>

<u>Undelined Text</u>

HTML Comments

<!--This is a comment-->

Lists
Ordered lists (<ol>) and unordered lists (<ul>).

<ol>

<li>First item</li>

<li>Second item</li>

</ol>

List items (<li>).

<ul>

<li>First item</li>

<li>Second item</li>

</ul>

Links and Images


Creating Links
<a> anchor tag for creating hyperlinks.
href attribute for specifying URL links.

<a href="https://www.cavendish.ac.ug">Visit us</a>


Adding Images
<img> tag used.
src attribute for image source.
alt attribute for alternative text.

<img src="path/to/image.jpg" alt="Description of image">

HTML Forms (used to collect user input. The user input is most often sent to a server
for processing).

Example of Form:

Form Elements
<form> tag.
Input types: text, password, checkbox, radio, and submit.
Form Attributes
action and method attributes.
Getting Started with the Form

<!DOCTYPE html>

<html>

<head>

<title>my Web</title>

</head>
<body>

<form action="/submit" method="post">

<input type="text" name="username"


placeholder="Enter username">

<input type="submit" value="Submit">

</form>

</body>

</html>

Basic Form Example

<!DOCTYPE html>

<html>

<head>

<title>my Web</title>

</head>

<body>

<h2>HTML FORMS</h2>

<form action="/submit" method="post">

<label for="fname">First Name:</label><br>

<input type="text" id="fname" name="fname"


value="Jake"><br>

<label for="lname">Last Name:</label><br>

<input type="text" id="lname" name="lname"


value="Hedges"><br><br>
<input type="submit" value="Submit">

</form>

</body>

</html>

HTML5 Features
New Semantic Elements

HTML5 introduced several semantic elements that give meaning to the structure
of the web content. They are designed to make HTML more readable, both for
developers and browsers or assistant technologies (such as screen readers). They
help define different parts of a webpage, allowing search engines and other tools
to better understand and categorize the content.

<header>, <footer>, <article>, <section>, <nav>.

<header>Header content</header>

<nav>Navigation links</nav>

<article>Article content</article>

<section>Section content</section>

<footer>Footer content</footer>

Why Use Semantic Elements?

➢ Improved Accessibility: Assistive technologies (like screen


readers) can interpret the content more effectively, providing better
navigation for users with disabilities.
➢ SEO Benefits: Search engines like Google can better understand
the content of a webpage, leading to better indexing and potentially
higher rankings.
➢ Clarity in Code: Using semantic tags makes the code more
meaningful. For example, it's clear what is the header, the
navigation, and the main content, as opposed to using
non-semantic tags like <div> or <span>.
➢ Responsive and Modular Design: With semantic elements, web
pages are easier to design and style, especially for responsive
layouts. You can target specific elements like <header> or
<article> in CSS or JavaScript, improving code modularity.

Usage of the Key Semantic Elements in HTML5

<header>

Represents the introductory content or a group of


navigation links at the top of a webpage or section.
It typically contains headings, logo, or navigational
elements.

Snippet

<header>

<h1>Welcome to My Website</h1>

<nav>

<a href="#home">Home</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</nav>

</header>
<nav>

Defines a section of the webpage intended for navigation,


typically containing links to other parts of the site.

Snippet

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a
href="#services">Services</a></li>

<li><a
href="#contact">Contact</a></li>

</ul>

</nav>

<article>

Represents a standalone piece of content that could be


distributed independently, such as a blog post, news article,
or forum post.

Snippet

<article>

<h2>How to Learn HTML5</h2>

<p>HTML5 is the latest version of HTML,


and it brings new semantic elements...</p>

</article>
<section>

Defines a section of a document, typically with a thematic


grouping of content. It is often used to break up larger
pieces of content into smaller, meaningful parts.

Snippet

<section>

<h2>About Us</h2>

<p>We are a company dedicated to providing


quality web development services.</p>

</section>

<footer>

Represents the footer of a webpage or section. It typically


contains information like copyright details, contact
information, or links to terms of service.

Snippet

<footer>

<p>&copy; 2024 MyWebsite. All rights


reserved.</p>

<p>Contact us: [email protected]</p>

</footer>

<aside>
Represents content that is indirectly related to the main
content. This is often used for sidebars or additional
informattion like quotes or links.

Snippet

<aside>

<h3>More Articles</h3>

<ul>

<li><a href="#article1">Javascript vs
Python</a></li>

<li><a href="#article2">What is new in


HTML5</a></li>

</ul>

</aside>

<main>

Specifies the main content of the webpage that is unique


and relevant to the document. It should only appear once in
a page.

Snippet

<main>

<h1>Welcome to My Blog</h1>
<p>This is where the main content of the
blog is displayed.</p>

</main>

<figure> and <figcaption>

<figure> is used to group media content such as images,


diagrams, or code listings, and <figcaption> provides
a caption for that content.

Snippet

<figure>

<img src="sunset.jpg" alt="Beautiful


Sunset">

<figcaption>Figure 1: A beautiful
sunset.</figcaption>

</figure>

Non-Semantic vs. Semantic Elements

Before HTML5, many web developers used generic elements like <div> and
<span> to structure their content. While these elements are still valid, they don't
provide any semantic meaning.

Non-Semantic Snippet

<div class="header">Header content</div>

<div class="nav">Navigation links</div>

<div class="article">Main article</div>


Semantic Snippet

<header>Header content</header>

<nav>Navigation links</nav>

<article>Main article</article>

Multimedia Elements
<audio> and <video> tags.

These tags enable us embed multimedia files.

Snippet Example:

<h2>Multimedia Elements</h2>

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

Your Browser doesn’t support the audio element.

</audio>

<br><br>

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

HTML5 Forms
New input types: email, date, number, etc.
Validation attributes.
<input type="email" name="email" placeholder="Enter your
email">

<input type="date" name="birthdate">

<input type="number" name="number">

Summary
HTML document structure, basic tags, links, images, forms, and HTML5 features.
Materials Needed:
Computer with a text editor (e.g., Notepad++, VS Code) and a web browser.

Assignment 1:

● Task: Create a personal web page that demonstrates your understanding of basic HTML
structure, including the use of semantic elements. Your page should include the following
components:
○ A heading with your full name. (Hint: <h1>Your Name</h1>)
○ A paragraph introducing yourself. Mention your interests, hobbies, or any other
relevant information. (Hint: <p>About yourself.</p>)
○ An image (e.g., a picture of your favorite place). (Hint: <img
src="yourimage.jpg" alt="Your Image">)
○ A link to your favorite website, introducing yourself. Mention your interests,
hobbies, or any other relevant information. (Hint: <a
href="https://www.cavendish.ac.ug">Link to college site </a>)

○ A Simple Contact Form: Create a basic contact form using the <form> element.
This form should collect a visitor’s first name, last name, and email address.
Ensure each field has a descriptive label. Use the required property (Hint: <input
type="text" id="lastname" name="lastname" required>)
○ Ensure your web page follows the principles of semantic HTML, using
appropriate elements for sections, such as <header>, <footer>,
<section>, and <main>.
Submission Guidelines:

● Save your HTML file with the name index.htm.


● Ensure the images are properly linked.
● Submit the files as a .zip or upload the project to a hosting platform like GitHub Pages
and share the link.

You might also like