HTML BASICS
OBJECTIVES
-Identify the basic html document
structure
-Use the different formatting elements
Basic HTML Document Structure
<!DOCTYPE html>
Note: The content inside the <body> section will be displayed in a browser. The content
inside the <title> element will be shown in the browser's title bar or in the page's tab.
Basic HTML Document Structure
•The <!DOCTYPE html> declaration defines that this document is an HTML5
document
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the HTML page
•The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
•The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.
•The <h1> element defines a large heading
•The <p> element defines a paragraph
WELCOME TO HTML!
•HyperText Markup Language
•Uses tags to identify content
•Used to create web pages
<p>I’m a paragraph</p>
Web Browsers
The purpose of a web browser (Chrome, Edge,
Firefox, Safari) is to read HTML documents and
display them correctly.
A browser does not display the HTML tags, but
uses them to determine how to display the
document
HTML Editors and HTML Documents
FOR WINDOWS OS USERS All HTML documents must start
• Notepad with a document type
• Wordpad declaration: <!DOCTYPE html>.
• Microsoft Word The HTML document itself
• Microsoft Visual begins with <html> and ends
Web Developer with </html>.
The visible part of the HTML
• AdobeDreamweaver document is
• WeBuilder between <body> and </body>.
• Visual Studio Code
• TextEdit
• iWeb
• Pages
HTML
Elements
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
Note: 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
HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Skipping the End Tag
Some HTML elements will display correctly, even if you forget the end tag.
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Case Sensitivity
HTML tags are not case sensitive: <P> means the same as <p>.
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:
<p>This is a <br> paragraph with a line break.</p>
HTML Attributes
HTML attributes provide additional information about HTML
elements.
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
HTML Attributes
The width and height
The href Attribute
The <a> tag defines a hyperlink. The href attribute Attributes
specifies the URL of the page the link goes to: The <img> tag should also contain
the width and height attributes, which specify the width and
height of the image (in pixels):
Example
<a href="https://www.w3schools.com">Visit
W3Schools</a> Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The src Attribute The required alt attribute for the <img> tag specifies an
The <img> tag is used to embed an image in an alternate text for an image, if the image for some reason
HTML page. The src attribute specifies the path to cannot be displayed. This can be due to a slow connection, or
the image to be displayed: an error in the src attribute, or if the user uses a screen
reader.
Example
<img src="img_girl.jpg"> Example
<img src="img_girl.jpg" alt="Girl with a jacket">
HTML Attributes
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>
HTML
Headings and
HTML
Paragraphs
HTML Headings and HTML Paragraphs
HTML headings are defined with HTML paragraphs are defined with the <p> tag:
the <h1> to <h6> tags.
<h1> defines the most important
heading. <h6> defines the least
<p>This is a paragraph.</p>
important heading: <p>This is another paragraph.</p>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Headings and HTML Paragraphs
HTML Horizontal Rules HTML <pre> Element
The <hr> tag defines a thematic break in an HTML page, The HTML <pre> element defines preformatted text.
and is most often displayed as a horizontal rule.
The text inside a <pre> element is displayed in a
The <hr> element is used to separate content (or define fixed-width font (usually Courier), and it preserves
a change) in an HTML page: both spaces and line breaks:
<pre>
My Bonnie lies over the ocean.
<h1>This is heading 1</h1>
<p>This is some text.</p> My Bonnie lies over the sea.
<hr>
<h2>This is heading 2</h2> My Bonnie lies over the ocean.
<p>This is some other text.</p>
</hr> Oh, bring back my Bonnie to me.
</pre>
The <hr> tag is an empty tag, which means that it
has no end tag.
HTML Links
HTML Links
HTML links are defined with the <a> tag:
By default, the linked page will be displayed in the current browser window. To change
this, you must specify another target for the link.
target="_blank" opens the document in a new window or tab.
<a href="https://www.w3schools.com">This is a
link</a>
<a href="https://www.techopedia.com/definition/8547/network-
administration7" target="_blank">This is a link</a>
HTML Styles
HTML Style
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
HTML Style Attribute
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">
<h1 style="background-color:powderblue;>This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Text Color and Text Size
The CSS color property defines the The CSS font-size property defines
text color for an HTML element: the text size for an HTML element:
<h1 style="font-size:300%;">This is a
<h1 style="color:blue;">This is a
heading</h1>
heading</h1>
<p style="font-size:160%;">This is a
<p style="color:red;">This is a
paragraph.</p>
paragraph.</p>
Fonts and Text Alignment
The CSS text-align property defines the
The CSS font-family property defines the horizontal text alignment for an HTML
font to be used for an HTML element: element:
<h1 style="font-family:verdana;">This <h1 style="text-align:center;">Centered
is a heading</h1> Heading</h1>
<p style="font-family:courier;">This <p style="text-align:center;">Centered
is a paragraph.</p> paragraph.</p>
HTML Text
Formatting
Nested HTML Elements
The HTML <b> element defines bold text, without any extra importance.
The HTML <strong> element defines text with strong importance. The content inside is typically displayed
in bold.
The content inside HTML <i> element is typically displayed in italic.
The HTML <mark> element defines text that should be marked or highlighted.
The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike
a line through deleted text.
The HTML <sub> element defines subscript text.
The HTML <sup> element defines superscript text.
HTML
Comments
HTML Comment Tag
Comments are not displayed by the browser, but they can help document your HTML
source code.
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Hide Content and Hide Inline Content
Comments can be used to hide content. Comments can be used to hide parts in the
middle of the HTML code.
This can be helpful if you hide content
temporarily: Example:
Example: Hide a part of a paragraph:
<p>This is a paragraph.</p> <p>This <!-- great text --> is a
paragraph.</p>
<!-- <p>This is another paragraph
</p> -->
<p>This is a paragraph too.</p>
You can also hide more than one line.
Everything between the <!-- and the --
> will be hidden from the display.
HTML Div Element
The <div> Element
The <div> element is by default a block element, meaning that it takes all available width, and comes with line
breaks before and after.
<div> as a container A <div> element takes up all available
width:
The <div> element is often used to group sections
of a web page together. <p>Lorem Ipsum <div>I am a
div</div> dolor sit amet.</p>
Example
A <div> element with HTML elements:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
HTML QUOTATION AND CITATION
ELEMENTS
HTML QUOTATION AND CITATION
ELEMENTS
ACTIVITY
Create your own About Me section
Play around with the code,
experiment with formatting text
