Podcast
Questions and Answers
What does HTML stand for?
What does HTML stand for?
HyperText Markup Language
What is the purpose of HTML elements?
What is the purpose of HTML elements?
To tell the browser how to display content.
What is an HTML attribute?
What is an HTML attribute?
Provides additional information about HTML elements.
Which HTML tag defines the most important heading?
Which HTML tag defines the most important heading?
What tag is used to define an HTML paragraph?
What tag is used to define an HTML paragraph?
Which attribute specifies the URL of the page a link goes to?
Which attribute specifies the URL of the page a link goes to?
What attribute is used to provide alternative text for an image?
What attribute is used to provide alternative text for an image?
What tag is used to define an HTML button?
What tag is used to define an HTML button?
What type of list will be marked with bullets by default?
What type of list will be marked with bullets by default?
What is the purpose of the HTML class attribute?
What is the purpose of the HTML class attribute?
Flashcards
What is HTML?
What is HTML?
The standard markup language for creating web pages, describing their structure using elements and tags.
HTML Elements
HTML Elements
Building blocks of HTML pages, represented by tags to label content like headings, paragraphs, and tables.
HTML Attributes
HTML Attributes
Provide extra information about HTML elements and are always specified in the start tag, usually as name-value pairs.
HTML Headings
HTML Headings
Signup and view all the flashcards
HTML Paragraphs
HTML Paragraphs
Signup and view all the flashcards
HTML Links
HTML Links
Signup and view all the flashcards
HTML Images
HTML Images
Signup and view all the flashcards
HTML Buttons
HTML Buttons
Signup and view all the flashcards
HTML Classes
HTML Classes
Signup and view all the flashcards
HTML Iframes
HTML Iframes
Signup and view all the flashcards
Study Notes
- HTML stands for HyperText Markup Language
- It is the standard markup language for creating web pages
- HTML describes the structure of a web page
- HTML elements tell the browser how to display content
HTML Elements
- HTML elements are the building blocks of HTML pages
- HTML elements are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to interpret the content of the page
- An HTML element usually consists of a start tag and an end tag
- For example:
<p>This is a paragraph.</p> - The element content is everything between the start and the end tag
- Some HTML elements have no content (empty elements)
- Empty elements are closed in the start tag (e.g.,
<br>) - Empty elements can also be written with a closing slash, like
<br /> - Start tag:
<p> - End tag:
</p> - Element content: This is a paragraph
- Complete HTML element:
<p>This is a paragraph.</p>
HTML Attributes
- HTML attributes provide additional information about HTML elements
- Attributes are always specified in the start tag
- Attributes usually come in name-value pairs like: name="value"
- The
langattribute declares the language of the Web page <html lang="en">specifies English as the language- The
titleattribute defines some extra information about an element - The value of the
titleattribute will be displayed as a tooltip when you mouse over the element - The
hrefattribute specifies the URL of the page the link goes to <a href="https://www.example.com">This is a link</a>- The
srcattribute specifies the path to the image to be displayed <img src="image.jpg">- The
widthandheightattributes specify the width and height of the image (in pixels) <img src="image.jpg" width="500" height="600">- The
altattribute specifies an alternate text for an image, if the image cannot be displayed <img src="image.jpg" alt="Girl with a jacket">- The
styleattribute is used to add styles to an element, such as color, font, size, and more <p style="color:red;">This is a red paragraph.</p>
HTML Headings
- HTML headings are defined with the
<h1>to<h6>tags <h1>defines the most important heading<h6>defines the least important heading- Browsers automatically add some space (margin) before and after a heading
HTML Paragraphs
- HTML paragraphs are defined with the
<p>tag - Browsers automatically add some space (margin) before and after a paragraph
HTML Links
- HTML links are defined with the
<a>tag - The
hrefattribute specifies the destination address of the link - By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
- The
targetattribute specifies where to open the linked document target="_blank"opens the linked document in a new tab or window- An absolute URL links to another website
<a href="https://www.example.com/">Visit Example</a>- A relative URL links to a page within the same website
<a href="default.htm">Home</a>- You can also use an image as a link
<a href="https://www.example.com/"><img src="image.jpg" alt="Example"></a>
HTML Images
- HTML images are defined with the
<img>tag - The
srcattribute specifies the path to the image - The
altattribute provides alternative information for an image if a user cannot view it - Always specify the
widthandheightattributes of an image - Image formats generally used are JPG, PNG, and GIF
HTML Buttons
- HTML buttons are defined with the
<button>tag <button>Click me</button>
HTML Lists
- HTML supports ordered, unordered, and definition lists
- HTML unordered lists are defined with the
<ul>tag - Each list item starts with the
<li>tag - List items will be marked with bullets by default
- HTML ordered lists are defined with the
<ol>tag - Each list item starts with the
<li>tag - List items will be marked with numbers by default
- HTML definition lists are defined with the
<dl>tag - Each term is defined with the
<dt>tag - Each description is defined with the
<dd>tag
HTML Classes
- The HTML
classattribute is used to specify a class name for an HTML element - Multiple HTML elements can share the same class
- The
classattribute is often used to point to a class name in a style sheet - It can also be used by JavaScript to manipulate elements with the specified class name
- Example:
<p class="center">This paragraph will be styled by the "center" class.</p>
HTML Iframes
- An HTML iframe is used to display a web page within a web page
- An HTML iframe is defined with the
<iframe>tag - The
srcattribute specifies the URL of the page to embed - Use the
heightandwidthattributes to specify the size of the iframe <iframe>can have atitleattribute- Example:
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
HTML File Paths
- A file path describes the location of a file in a web site's folder structure
- File paths are used when linking to external files, like:
- Web pages
- Images
- Style sheets
- JavaScripts
- Absolute file path: A full URL to an internet file
- Example:
src="https://www.example.com/images/picture.jpg" - Relative file path: Points to a file within the same web site
- Example:
src="images/picture.jpg"
HTML Head Element
- The
<head>element is a container for metadata (data about data) - The
<head>element is placed between the<html>tag and the<body>tag - Metadata is data about the HTML document
- Metadata is not displayed
- Metadata typically define the document title, character set, styles, scripts, and other meta information
- The following tags can go inside the
<head>element: <title>(Defines a title for the document)<style>(Defines style information for a document)<meta>(Defines metadata about an HTML document)<link>(Defines the relationship between an HTML document and an external resource)<script>(Defines a client-side script)<base>(Specifies the base URL/target for all relative URLs in a document)
HTML Layout Elements
- HTML5 offers new semantic elements to define different parts of a web page:
<header><nav><section><article><aside><footer>- These elements make the HTML more descriptive and easier to read
HTML Character Sets
- To display an HTML page correctly, a web browser must know the character set (character encoding) used in the page
- The
<meta>tag is used to specify the character set <meta charset="UTF-8">- UTF-8 is the preferred character set for HTML documents
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
Learn the basics of HTML (HyperText Markup Language), the standard markup language for creating web pages. This lesson covers HTML elements, tags, and how browsers interpret them to display content. Understand the structure of HTML pages and the role of start and end tags.
