Scribd
Upload
6 views

Introduction-to-HTML (2)

Uploaded by

Iddrisu Abdulai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Introduction-to-HTML (2)

Uploaded by

Iddrisu Abdulai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Introduction to

HTML
HTML (Hypertext Markup Language) is the standard markup
language used to create and structure web pages. It
provides the foundation for building the content, layout, and
interactive elements of websites. Understanding HTML is
crucial for any web development project, as it enables
developers to create engaging and functional online
experiences.

by Abdulai Yorli Iddrisu


HTML Document Structure
Doctype Head Body

The doctype declaration The head section contains The body section holds the
specifies the version of HTML metadata, such as the page visible content of the web page,
used in the document, ensuring title, character encoding, and including headings, paragraphs,
proper rendering by web links to external resources like images, links, and other
browsers. CSS and JavaScript files. elements.
HTML Headings
1 h1
The top-level heading, used for the main title or
topic of the page.

2 h2-h6
Subheadings that provide structure and hierarchy
to the content.

3 Semantic Meaning
Headings convey the importance and organization
of the content, not just the visual styling.
HTML Paragraphs and Text
Formatting
Paragraphs Text Formatting
The <p> tag is used to HTML provides various tags
create paragraphs of text on like <b>, <i>, and <u> to
a web page. style text with bold, italic,
and underline, respectively.

Semantic Markup Preformatted Text


Using semantic tags like The <pre> tag preserves the
<strong> and <em> conveys formatting of text, including
the meaning of the text, not whitespace and line breaks.
just the visual appearance.
HTML Lists
Unordered Lists Ordered Lists Definition Lists

Using the <ul> tag, unordered Ordered lists, created with the Definition lists, marked up with
lists display items with bullet <ol> tag, number the list items <dl>, are used to create a list of
points. sequentially. terms and their definitions.
HTML Links

Internal Links External Links Anchors


Links that point to other pages Links that navigate to other Links that jump to a specific
within the same website, using websites, also using the <a section within the same web
the <a href> tag. href> tag. page, using the # symbol.
HTML Images
1 Embedding Images 2 Image Formats
The <img> tag is used to insert images into web Common image formats for the web include JPEG,
pages. PNG, and SVG.

3 Responsive Design 4 Accessibility


Images can be made responsive to different The alt attribute provides alternative text
screen sizes using CSS or the srcset attribute. descriptions for images, improving accessibility.
HTML Forms
Input Fields
Form elements like <input>, <textarea>, and
<select> allow users to enter data.

Buttons
The <button> tag creates interactive buttons for
form submission and other actions.

Form Validation
HTML5 introduced built-in form validation
attributes to ensure data integrity.
HTML Semantic Elements
header Defines the header of a
document or section

nav Defines a set of navigation


links

article Represents a self-contained


piece of content

section Defines a section in a


document

footer Defines the footer of a


document or section
Putting it All Together
Example HTML Code

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<a href="https://example.com">Click me</a>
<img src="image.jpg" alt="My Image">
</body>
</html>

You might also like