Introduction to HTML

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

What does HTML stand for?

Hyper Text Markup Language

HTML is the standard markup language for creating Web pages.

True (A)

What does HTML describe?

the structure of a Web page

What is an HTML element defined by?

<p>a start tag, some content, and end tag</p> Signup and view all the answers

What is the purpose of a web browser?

<p>B and C (B)</p> Signup and view all the answers

Which tag defines the most important heading?

<p><code>&lt;h1&gt;</code> (D)</p> Signup and view all the answers

<h6> defines the least important heading.

<p>True (A)</p> Signup and view all the answers

What tag defines HTML paragraphs?

<p><code>&lt;p&gt;</code></p> Signup and view all the answers

What tag defines HTML links?

<p><code>&lt;a&gt;</code></p> Signup and view all the answers

What is the name of the tag which is used for images?

<p><code>&lt;img&gt;</code></p> Signup and view all the answers

HTML elements can have attributes.

<p>True (A)</p> Signup and view all the answers

The ______ attribute specifies the URL of the page the link goes to.

<p>href</p> Signup and view all the answers

The <img> tag is used to embed an image in an HTML page. What does the src attribute specify?

<p>the path to the image to be displayed</p> Signup and view all the answers

What do the width and height attributes specify?

<p>the width and height of the image (in pixels)</p> Signup and view all the answers

What does the alt attribute specify?

<p>an alternate text for an image, if the image for some reason cannot be displayed</p> Signup and view all the answers

The ______ attribute is used to add styles to an element, such as color, font, size, and more.

<p>style</p> Signup and view all the answers

The ______ attribute defines some extra information about an element.

<p>title</p> Signup and view all the answers

What tag defines a thematic break in an HTML page?

<p><code>&lt;hr&gt;</code> (C)</p> Signup and view all the answers

Which HTML element defines a line break?

<p><code>&lt;br&gt;</code></p> Signup and view all the answers

Which HTML element defines preformatted text?

<p><code>&lt;pre&gt;</code></p> Signup and view all the answers

Which CSS property defines the background color for an HTML element?

<p>background-color</p> Signup and view all the answers

Which CSS property defines the text color for an HTML element?

<p>color</p> Signup and view all the answers

Which CSS property defines the font to be used for an HTML element?

<p>font-family</p> Signup and view all the answers

Which CSS property defines the horizontal text alignment for an HTML element?

<p>text-align</p> Signup and view all the answers

Flashcards

What does HTML stand for?

Hyper Text Markup Language, the standard markup language for creating web pages.

What is the primary role of HTML?

HTML describes the structure of a web page using elements.

What does HTML consist of?

A series of elements that tell the browser how to display content.

What is an HTML element?

An instruction to the browser on how to display content (e.g., heading, paragraph, link).

Signup and view all the flashcards

What are the key parts of an HTML element?

Defined by a start tag, content, and an end tag.

Signup and view all the flashcards

What does a complete HTML element include?

Everything from the start tag to the end tag, including the content in between.

Signup and view all the flashcards

What is an absolute URL?

Links to an external image hosted on another website, using the full URL.

Signup and view all the flashcards

What is a relative URL?

Links to an image hosted within the website, without including the domain name.

Signup and view all the flashcards

Study Notes

  • HTML stands for Hyper Text Markup Language
  • It is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • It consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements can label pieces of content such as headings, paragraphs, and links

HTML Document Structure

  • The basic structure includes the html, head, title and body. html <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

HTML Elements

  • Elements are defined by a start tag, content, and end tag: <tagname>Content goes here...</tagname>
  • An HTML element is everything from the start tag to the end tag
  • Examples include:

    My First Heading

    and

    My first paragraph.

Web Browsers

  • Web browsers like Chrome, Edge, Firefox, and Safari read HTML documents and display them correctly
  • Browsers use HTML tags to determine how to display the document but do not display the HTML tags themselves

HTML Editors

  • Text editors are all that is needed to work with HTML
  • Notepad on PC and TextEdit on Mac are recommended for learning HTML

Steps to Create an HTML Page

  • Open a text editor and write or copy HTML code
  • Save the file with a ".htm" extension with UTF-8 encoding
  • Open the saved HTML file in a web browser to view the result

HTML Headings

  • Headings are defined with

    to

    tags
  • The

    tag defines the most important heading, while

    defines the least
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

  • Paragraphs are defined with the

    tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
  • Links are defined with the tag
<a href="https://stdominiccollege.edu.ph/">This is a link</a>

HTML Images

  • Images are defined with the tag
  • Attributes such as the source file (src), alternative text (alt), width, and height are included
<img src="picture.jpg" alt="SDCA Logo" width="104" height="142">

Nested HTML Elements

  • HTML elements can be nested inside each other
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Skipping End Tags

  • Some HTML elements display correctly even if the end tag is omitted; however, it is best practice not to skip closing tags

Empty HTML Elements

  • HTML elements with no content are known as empty elements
  • Example: The
    tag defines a line break and does not require a closing tag
<p>This is a <br> paragraph with a line break.</p>

HTML Attributes

  • All HTML elements can have attributes, which provide additional information
  • Attributes are specified in the start tag and usually come in name/value pairs
  • Example: name="value"

The href Attribute

 
<a href="https://stdominiccollege.edu.ph/">Visit SDCA Website</a>

The src Attribute

  • Used with the tag to embed images
  • Specifies the path to the image

Types of URLs

  • Absolute URLs: Link to an external image on another website with the full URL: src="https://stdominiccollege.edu.ph/images/one-asia-heritage/asean/brunei-1.jpg"
  • Relative URLs: Link to an image within the website, without including the domain name: src="img_girl.jpg"

The width and height Attributes

  • Used with the tag to specify the dimensions of the image in pixels
<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

  • Used with the tag, it specifies alternate text for an image if it cannot be displayed, due to slow connection, an error, or the use of a screen reader
<img src="img_girl.jpg" alt="Girl with a jacket">
  • What happens if we try to display and image that does not exist?
<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute

  • Used to add styles to an element, affecting the visual appearance
 <p style="color:red;">This is a red paragraph.</p>

The title Attribute

  • Specifies extra information about an element
  • The value of the title attribute displays as a tooltip on mouse hover
<p title="I'm a tooltip">This is a paragraph.</p>

Quoting Attribute Values

  • Although the HTML standard doesn't require quotes around attribute values, it is best practice to always use quotes
<a href="https://www.google.com/html/">Visit Google Website</a>
  • Sometimes you have to use quotes
<p title=About SDCA>

HTML Headings

  • Headings are titles or subtitles displayed on a webpage
  • <h1> to <h6> tags are used to define headings of decreasing importance, influencing prominence and hierarchy
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Bigger HTML Headings

  • HTML headings have a default size, the style attribute and CSS font-size property can be used to customize the font sie
<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs

  • A paragraph always starts on a new line
  • Browsers automatically add some white space (a margin) before and after a paragraph
  • the HTML

    element defines it

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

HTML Display

  • HTML ignores extra lines and spaces in the source code
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source              code,
but the       browser
ignores it.
</p>

HTML Horizontal Rules

  • The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
  • Used to visually separate or define a change in content

HTML Line Breaks

  • The <br> element defines a line break without starting a new paragraph.
  • If you want a line break (a new line) without starting a new paragraph

The Poem Problem

  • By default, HTML collapses multiple lines into a single line when using the

    tag

  • <br> is used to fix it
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>

The HTML <pre> Element Usage

  • The HTML <pre> element defines preformatted text, preserving both spaces and line breaks
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>

HTML Styles

  • Used to add styles such as color, font, size, and more

The HTML Style Attribute

  • Setting the style of an HTML element, can be done with the style attribute.
<tagname style="property:value;">
  • Property is a CSS property.
  • Value is a CSS value.

Specific Styling

  • The CSS background-color property defines the background color
<body style="background-color: powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Text Color

  • The CSS color property defines the text color
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts

  • The CSS font-family property defines the font to be used for an HTML element
<h1 style="font-family: verdana;">This is a heading</h1>
<p style="font-family: courier; ">This is a paragraph.</p>

Text Size

  • The CSS font-size property defines the text size for an HTML element
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

  • The CSS text-align property defines the horizontal text alignment for an HTML element
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center; ">Centered paragraph.</p>

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

HTML Tutorial PDF - Web Design Basics

More Like This

HTML Elements Quiz
3 questions

HTML Tags Quiz: Are HTML Tags Case Sensitive?

PreeminentRadiance avatar
PreeminentRadiance
HTML Tags & Elements Overview
10 questions

HTML Tags & Elements Overview

HallowedHurdyGurdy avatar
HallowedHurdyGurdy
Introduction to HTML
10 questions

Introduction to HTML

CapableTsavorite avatar
CapableTsavorite
HTML Basics and Tags
10 questions

HTML Basics and Tags

SociableLilac9018 avatar
SociableLilac9018
Use Quizgecko on...
Browser
Open
Browser
Browser