Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Copy of Learning HTML
FOUNDATIONS OF HTML
<what_is_html?>
What is HTML?
Definition
HTML, short for hypertext markup language, is a language to organize and publish pages to be displayed on a web browser.
This language allows for organizing text, images, and videos on web pages.
In this presentation, we will look at three foundations of HTML.
<foundations>
Elements
& Structure
Media
Tables
Elements
<elements>
and structure
Elements and structure are the basic building blocks of HTML.
An element is a unit of content in an HTML document formed by HTML tags and the text or media it contains.
Closing tag
Opening tag
An HTML tag defines how the web browser should format and display the content contained within the tag.
<p> My cat is very grumpy </p>
Most tags have an opening tag and a closing tag, and content is usually contained between these tags.
Content
Element
HTML
<HTML _Anatomy>
All code to be interpreted as HTML must be contained between opening and closing <html> tags.
Anatomy
HTML
The element which contains a child element is called a parent—this hierarchy can be extended to grandchildren, great-grandchildren, etc.
HEAD BODY
An element is considered a child when it is contained within another element.
<html>
<head>
<title>Google</title>
<style>...</style>
</head>
<body>
<div>...</div>
<center>...</center>
<div>...</div>
</html>
DIV CENTER DIV
TITLE STYLE
GOOGLE <...> <...> <...> <...>
Elements at the same level are considered siblings.
<Structure>
Structure
Two spaces of indentation are required when nesting elements.
Tags
<Tags>
The heading element, like its namesake, is used to display headings.
1
There are six different headings, which are ordered from largest to smallest, starting with <h1> and ending with <h6>.
1
<p> <h1> This is my main heading</h1></p>
2
To display a block of plain text, you can use the paragraph tag: <p>.
2
Some tags contain attributes that provide information about the tag or change styling for the element.
Media
Here, we will learn how to include media on a web page.
<media>
1
The image tag <img> is self-closing and allows you to add an image to a web page.
2
3
1
2
The image tag has a required attribute called src, which must be set to the image’s source, or location of the image.
<img src="dog.jpg" alt="My Dog">
3
image description
image filename
The alt attribute allows you to provide a description of the image.
Images
A self-closing tag does not require a closing tag—content is contained within the opening tag rather than the opening and closing tags.
<Images>
Videos
<Videos>
3
The width and height attributes set the size of the video displayed in the browser.
<video src ="myVideo.mpr" width = "320"
1
height="340r" controls >
The video tag displays video and requires a src attribute with a link to the video source.
4
Video not supported
The controls attribute instructs the browser to include basic video controls such as pause, play, and skip.
2
</video>
Unlike the image tag, the video tag requires an opening and closing tag.
5
The text “Video not supported” will only be displayed if the browser is unable to load the video.
Your turn
From what you’ve learned here, you can make a basic webpage using HTML.
Create a web page with the heading “My Media,” and add some text using the paragraph tags to give an overview of the media you will use.
<your_turn>
Be sure to include at least one image and one video, and don’t forget to use the correct attributes.