HTML
Stephano Patrick Mabziness, Florence Tina Mwalwanda
Isaac S. Mwakabira
Learning Outcomes
By the end of this lecture, students should be able to:
❖ Design and build basic, cross-browser websites and web applications, which
adhere to set design and semantic standards
➢ Structure - The hypertext markup language(HTML), and the basic HTML structure of the web
page.
Indicative Content
By the end of this lecture, students should be able to understand :
● Tools
● Basic HTML syntax and structure
● Good document structure
● Advanced text techniques
● Links
● Media
● Other interactive elements
● HTML tables
● Debugging HTML
Tools to get started
Text editor -vscode..
Web browser - chrome,firefox..
So what is HTML?
● HTML stands for Hyper Text Markup Language.
● HTML is the standard markup language for creating Web pages.
● HTML is for structure and semantics (meaning).
● HTML is a markup language that defines the structure of your content.
● Is the code that is used to structure a web page and its content.
● HTML consists of a series of elements.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Getting started -Basic HTML syntax
Example
Anatomy of an HTML element Basic HTML syntax
The element is the opening tag, followed by content, followed by the closing tag
Nesting elements Basic HTML syntax
Void elements
Void?
Attributes
● HTML elements can have attributes
● Attributes contain extra information about the element that won't appear in the content.
An attribute should have:
● A space between it and the element name. (For an element with more than one attribute,
the attributes should be separated by spaces too.)
● The attribute name, followed by an equal sign.
● An attribute value, wrapped with opening and closing quote marks.
● Src,alt,width [Link]
more!
Entity references: Including special characters in HTML
In HTML, the characters <, >,",', and & are special characters. They are parts of the HTML syntax itself. So
how do you include one of these special characters in your text?
HTML comments
To write an HTML comment, wrap it in the special markers <!-- and -->. For example:
Marking up text
Headings
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
Lists→
Structure for list
<ul>
milk
eggs
bread
hummus
</ul>
Lists
<ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>Go straight across the first two roundabouts</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right, 300 meters up the road</li>
</ol>
HTML Links
● Links are found in nearly all web pages. Links allow users to click their way from page to page.
● You can click on a link and jump to another document.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Media
image
<img src="[Link]" alt="Dinosaur" /> image
video
<video src="[Link]" controls>
<p>
Your browser doesn't support HTML video. Here is a
<a href="[Link]">link to the video</a> instead.
</p>
</video>
iframe??
Other interactive elements
Forms - main points of interaction between a user and a website or application
Input Validation
Sending data to a web server (methods -post,get e.t.c)
● Common <input> types — text, number, file, checkbox, radio, password, search, and submit.
● Common attributes — name and value.
● Client-side validation basics — required, min, max, minlength, maxlength, and pattern.
Buttons
<button type="submit">Send your message</button>
Anatomy of an HTML document
<!DOCTYPE html>
<html></html>
All in one
HTML tables
A very common task in HTML is structuring tabular data
Good document structure
Document and website structure
In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of
block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content
column").
such sections, for example:
● header: <header>.
● navigation bar: <nav>.
● main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements.
● sidebar: <aside>; often placed inside <main>.
● footer: <footer>.
Debugging HTML
Facts
HTML is not compiled into a different form before the browser parses it and shows the result (it is interpreted, not compiled).
Types of errors
Syntax errors
Logic errors:these are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that
the program runs incorrectly.(hard)
HTML itself doesn't suffer from syntax errors because browsers parse it permissively, meaning that the page still displays
even if there are syntax errors
browser developer tools - DOM inspector(Document Object Model)
Or HTML validation
Summary
● HTML fundamentals
○ Syntax, document structure, lists, advanced text techniques, links,
media embedding, interactive elements, HTML tables
● Debugging
The End……..
Obrigado!
References
[Link]
[Link]
[Link]