What is HTML?
HTML is the standard markup language for creating Web pages.
- HTML stands for Hyper Text Markup Language
- HTML describes the structure of Web pages using markup
- 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 render the content of the page
Welcome to HTML!
HTML stands for HyperText Markup Language.
Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.
Here is an example of an HTML tag:
This course is a combination of interactive quizzes and exercises to facilitate speed and quality of learning.
Tap the Continue button to go to your first quiz!
What does a markup language use to identify content?
The Web Structure
The ability to code using HTML is essential for any web professional. Acquiring this skill should be the starting point for anyone who is learning how to create content for the web.
Modern Web Design
HTML: Structure
CSS: Presentation
JavaScript: Behavior
PHP or similar: Backend
CMS: Content Management
HTML is easy to learn. So don't wait! Dive right in!
Rearrange the code to surround the text "I am learning HTML on SoloLearn!" with opening and closing <p> tags:
<p>
I am learning HTML
</p>
on SoloLearn!
The <html> Tag
Although various versions have been released over the years, HTML basics remain the same.
The structure of an HTML document has been compared with that of a sandwich. As a sandwich has two slices of bread, the HTML document has opening and closing HTML tags.
These tags, like the bread in a sandwich, surround everything else:<html>
…
</html>
Everything in an HTML document is surrounded by the <html> tag.
Fill in the blank to create an opening html tag:
< >
The <head> Tag
Immediately following the opening HTML tag, you'll find the head of the document, which is identified by opening and closing head tags.
The head of an HTML file contains all of the non-visual elements that help make the page work.<html>
<head>…</head>
</html>
The head section elements will be discussed later.
Drag and drop from the options below to create a valid HTML document:
<
>
<head> </
>
</html>
<head> </
</html>
head
</>
html
</html>
tag
The <body> Tag
The body tag follows the head tag.
All visual-structural elements are contained within the body tag.
Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.
Basic HTML Structure:
Rearrange the code to create a basic HTML document structure:
<body>
<html>
<head></head>
</body>
</html>
The HTML File
HTML files are text files, so you can use any text editor to create your first webpage.
There are some very nice HTML editors available; you can choose the one that works for you. For now let's write our examples in Notepad.
You can run, save, and share your HTML codes on our Code Playground, without installing any additional software.
What type of editor is used to edit HTML code?
editor
The HTML File
Add the basic HTML structure to the text editor with "This is a line of text" in the body section.
In our example, the file is saved as first.html
When the file is opened, the following result is displayed in the web browser:
Don’t forget to save the file. HTML file names should end in either .html or .htm
What is the correct extension for HTML files?
The <title> Tag
To place a title on the tab describing the web page, add a <title> element to your head section:
This will produce the following result:
The title element is important because it describes the page and is used by search engines.
Where should you put the title tag?
Creating a Blog
Throughout this course, we'll help you practice and create your own unique blog project, so you'll retain what you've learned and be able to put it to use. Just keep going and follow the instructions in the TASK section. This is what your finished blog page will look like.
TASK: Tap Try It Yourself to see the code and its output.
Don't be afraid of long codes. By the time you complete the course, everything will make complete sense and look highly doable. We guarantee it!
TASK:
1. Open the code.
2. On the top header, change the name to your own name.
3. Change the page title. Remember, the page title is located inside the <title> tag in the <head> of the page.
What is HTML?
Of which main parts does the HTML file consist of?
Which tag contains the visual part of the web page?
<____>
Fill in the blanks:
<html>
<head>
<head>
</___>
<body>
This is a line of text.
This is a line of text.
</__>
</html>
The <p> Element
To create a paragraph, simply type in the <p> element with its opening and closing tags:
The result:
Browsers automatically add an empty line before and after a paragraph.
Drag and drop from the options below to create paragraphs:
<p>HTML is fun!
<head>
<html>
<p>
<body>
</p>
Single Line Break
Use the <br /> tag to add a single line of text without starting a new paragraph:
The <br /> element is an empty HTML element. It has no end tag.
What tag is used to create a line-break without an extra space between the text blocks?
Single Line Break
Opening the HTML file in the browser shows that a single line break has been added to the paragraph:
The <br /> element has no end tag.
Fill in the blanks:
<html>
<body>
<p>This is a paragraph</__>
<body>
<p>This is a paragraph</__>
<p> This is<__/>a line break </p>
</body>
</html>
</html>
Formatting Elements
In HTML, there is a list of elements that specify text style.
Formatting elements were designed to display special types of text:
The <strong> tag is a phrase tag. It defines important text.
Which two tags below make the text visually bold?
Formatting Elements
Each paragraph in the example is formatted differently to demonstrate what each tag does:
Browsers display <strong> as <b>, and <em> as <i>.
However, the meanings of these tags differ: <b> and <i> define bold and italic text, respectively, while <strong> and <em> indicate that the text is "important".
HTML Headings
HTML includes six levels of headings, which are ranked according to importance.
These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
The following code defines all of the headings:
Result:
It is not recommended that you use headings just to make the text big or bold, because search engines use headings to index the web page structure and content.
What tags are used to indicate headings?
Horizontal Lines
To create a horizontal line, use the <hr /> tag.
Result:
In HTML5, the <hr> tag defines a thematic break.
How do you create a horizontal line in HTML?
<___/>
Comments
The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.<!-- Your comment goes here -->
Example:
Result:
As you can see, the comment is not displayed in the browser.
There is an exclamation point (!) in the opening tag, but not in the closing tag.
Make the text an HTML comment:
<!
__This is a comment__Formatting Text
Let's get back to our blog project.
The About Me section will contain a heading that's wrapped in a <h1> tag, along with two paragraphs that format text using the tags you've just learned.
Let's take a look at the code:
You may have noticed that we've also used some CSS to add colors and styles to the page. When you complete HTML, we strongly recommend our free CSS Tutorial!
TASK:
1. Create your own About Me section by changing the text.
2. Play around with the code; experiment with formatting text.
Fill in the blanks to form a valid HTML:
<p>
Some quote <br />
Some quote <br />
<__>- by some author</i>
<__>
HTML Elements
HTML documents are made up of HTML elements.
An HTML element is written using a start tag and an end tag, and with the content in between.
HTML documents consist of nested HTML elements. In the example below, the body element includes the <p> tags, the <br /> tag and the content, "This is a paragraph".
Some HTML elements (like the <br /> tag) do not have end tags.
General HTML elements consist of:
HTML Elements
Some elements are quite small. Since you can't put contents within a break tag, and you don't have an opening and closing break tag, it’s a separate, single element.
So HTML is really scripting with elements within elements.
Some HTML elements (like the <br /> tag) do not have end tags.
Fill in the blanks:
<html>
<___><title>Title</__></head>
<body>
<p>Some text</p>
</body>
</html>
<p>Some text</p>
</body>
</html>
HTML Attributes
Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.
In this example, the value of "center" indicates that the content within the p element should be aligned to the center:
Attributes are always specified in the start tag, and they appear in name="value" pairs.
What is the role of an attribute in HTML?
Attribute Measurements
As an example, we can modify the horizontal line so it has a width of 50 pixels.
This can be done by using the width attribute:
An element's width can also be defined using percentages:
An element's width can be defined using pixels or percentages.
What measurement units can be used for the width attribute?
The Align Attribute
The align attribute is used to specify how the text is aligned.
In the example below, we have a paragraph that is aligned to the center, and a line that is aligned to the right.
The align attribute of <p> is not supported in HTML5.
What attribute is used to align the contents of an element to the right, center or left?
Attributes
You may be wondering what happens if you try to apply contradictory attributes within the same element.
The align attribute of <p> is not supported in HTML5.
Which attribute is used to align the content of a paragraph to the right?
<p__="right">
The <img> Tag
The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag.
The image's URL (address) can be defined using the src attribute.
The HTML image syntax looks like this:<img src="image.jpg" />
The alt attribute specifies an alternate text for an image.
What tag should be used to add an image?
<____/>
Image Location
You need to put in the image location for the src attribute that is between the quotation marks.
For example, if you have a photo named "tree.jpg" in the same folder as the HTML file, your code should look like this:
In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.
What attribute should be used to add an image URL?
Image Resizing
To define the image size, use the width and height attributes.
The value can be specified in pixels or as a percentage:
Loading images takes time. Using large images can slow down your page, so use them with care.
What two attributes can be used to resize images inside HTML code?
Select all that apply
Image Border
By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.
By default, Internet Explorer 9, and its earlier versions, display a border around an image unless a border attribute is defined.
Fill in the blank:
<img___="tree.jpg" alt="" />
The <a> Tag
Links are also an integral part of every web page. You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage.
In HTML, links are defined using the <a> tag.
Use the href attribute to define the link's destination address:<a href=""></a>
To link an image to another document, simply nest the <img> tag inside <a> tags.
What tag is used to create a link to a web page?
<__href="">
Creating Your First Link
In the example below, a link to SoloLearn's website is defined:
Once the code has been saved, "Learn Playing" will display as a link:
Learn Playing
Clicking on "Learn Playing" redirects you to www.sololearn.com
Links can be either absolute or relative.
Which attribute of the link tag contains the URL location that you are trying to link to?
The target Attribute
The target attribute specifies where to open the linked document.
Giving a _blank value to your attribute will have the link open in a new window or new tab:
A visited link is underlined and purple.
Which value of the target attribute makes the link open in a new tab or a new window?
<a href="2.html" target="__">
HTML Ordered Lists
An ordered list starts with the <ol> tag, and each list item is defined by the <li> tag.
Here is an example of an ordered list:
Result:
The list items will be automatically marked with numbers.
Enter the tag corresponding to the list item:
<__>
HTML Unordered List
An unordered list starts with the <ul> tag.
Result:
The list items will be marked with bullets.
Fill in the blanks:
<ul>
<li>Item 1
<li>Item 1
</__>
<li>Item 2</li></__>My Skills
Back to our blog! Let's create the My Skills section, which is an unordered list of languages you know.
Reminder: Use the <ul> tag, in which each item is represented by the <li> tag, to create an unordered list. Take a look at the code:
We'll learn how to add progress bars to each of the skills in the following module.
TASK:
1. Create your own My Skills section.
2. Use the <a> tag to make each list item a link.
Fill in the blanks to create a list in which the first item links to www.sololearn.com.
<ul>
<li>
<li>
<
<__href="https://www.sololearn.com">
A
/a> <__>
>
<li>B</li>
</ul>
/a> <__>
<li>B</li>
</ul>
My Skills
Back to our blog! Let's create the My Skills section, which is an unordered list of languages you know.
Reminder: Use the <ul> tag, in which each item is represented by the <li> tag, to create an unordered list. Take a look at the code:
We'll learn how to add progress bars to each of the skills in the following module.
TASK:
1. Create your own My Skills section.
2. Use the <a> tag to make each list item a link.
Fill in the blanks to create a list in which the first item links to www.sololearn.com.
<ul>
<li>
<li>
<__href="https://www.sololearn.com">
A</a>
<__>
<li>B</li>
</ul>
</ul>
Creating a Table
Tables are defined by using the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table columns (table data) with the <td> tag.
Here is an example of a table with one row and three columns:<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table data tags <td> act as data containers within the table.
They can contain all sorts of HTML elements, such as text, images, lists, other tables, and so on.
What tag is used to create columns in a row?
The border and colspan Attributes
A border can be added using the border attribute:<table border="2">
A table cell can span two or more columns:
Result:
The border attribute is not supported in HTML5.
What attribute is used to expand a cell for two or more cells?
Colspan Color
The example below demonstrates the colspan attribute in action:
Result:
You can see that the cell containing "Orange" spans two cells.
To make a cell span more than one row, use the rowspan attribute.
Fill in the blanks:
<table>
<__>
<td>Text 1</__>
<td>Text 2</td>
</tr>
</tr>
</___>
The align and bgcolor Attributes
To change your table's position, use the align attribute inside your table tag:<table align="center">
Now let's specify a background color of red for a table cell. To do that, just use the bgcolor attribute.
Result:
In the case of styling elements, CSS is more effective than HTML. Try our free "Learn CSS" course to learn more about CSS and styles.
What attribute is used to change the color of a cell?
My Schedule
Use table tags to add a table to your blog that represents your daily learning schedule.
The <th> tags represent the table headers. Take a look at the following code:
The empty <td> tags represent empty table cells. They're necessary because they maintain the table's structure.
TASK: Customize the table to create your unique schedule!
Fill in the blanks to create a valid table:
<table>
<___>
<td>A</td>
<td>B<___>
<td>B<___>
</tr>
</table>
</table>
Types of Elements
In HTML, most elements are defined as block level or inline elements.
Block level elements start from a new line.
For example: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.
Inline elements are normally displayed without line breaks.
For example: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.
The <div> element is a block-level element that is often used as a container for other HTML elements.
When used together with some CSS styling, the <div> element can be used to style blocks of content:
Similarly, the <span> element is an inline element that is often used as a container for some text.
When used together with CSS, the <span> element can be used to style parts of the text:
Summary
The <div> element defines a block-level section in a document.
The <span> element defines an inline section in a document.
Which of the following are block level elements?
Select all that apply
Types of Elements
Other elements can be used either as block level elements or inline elements. This includes the following elements:
APPLET - embedded Java applet
IFRAME - Inline frame
INS - inserted text
MAP - image map
OBJECT - embedded object
SCRIPT - script within an HTML document
You can insert inline elements inside block elements. For example, you can have multiple <span> elements inside a <div> element.
Inline elements cannot contain any block level elements.
Can you insert a block element inside an inline element?
The <form> Element
HTML forms are used to collect information from the user.
Forms are defined using the <form> element, with its opening and closing tags:<body>
<form>…</form></body>
Use the action attribute to point to a webpage that will load after the user submits the form.<form action="http://www.sololearn.com">
</form>
Usually the form is submitted to a web page on a web server.
Which attribute contains the URL address of the webpage that is loaded after a form submission?
The method and name Attributes
The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted (see below for description):<form action="url" method="GET">
<form action="url" method="POST">
When you use GET, the form data will be visible in the page address.
Use POST if the form is updating data, or includes sensitive information (passwords).
POST offers better security because the submitted data is not visible in the page address.
To take in user input, you need the corresponding form elements, such as text fields. The <input> element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.
The example below shows a form requesting a username and password:
Result:
The name attribute specifies a name for a form.
Which value for the type attribute should be used for a password field?
<input type="____"
Form Elements
If we change the input type to radio, it allows the user select only one of a number of choices:
Result:
The type "checkbox" allows the user to select more than one option:
Result:
The <input> tag has no end tag.
Fill in the blanks:
<____method="POST" action="#">
<input type="text" name="name" >
<
____type="submit" name="submit"></____>
Form Elements
The submit button submits a form to its action attribute:
Result:
After the form is submitted, the data should be processed on the server using a programming language, such as PHP.
Which value for the type attribute turns the input tag into a submit button?
Contact Form
Next, we'll create a Contact Form for your blog. The form will include Name, Email, and Message fields. We'll also add a Submit button.
Check out the code:
This is just a static HTML page, so it won't work to actually submit the form. You'd need to create the server-side code in order to submit a real form and process the data. To learn how, complete SoloLearn's PHP course once you've completed the HTML and CSS courses.
TASK: Check out the code and customize the form to fit your needs!
To support multiple lines of input you should use the following element:
HTML Colors!
HTML colors are expressed as hexadecimal values.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
As you can see, there are 16 values there, 0 through F. Zero represents the lowest value, and F represents the highest.
What characters does the hexadecimal system consist of?
HTML Color Model
Colors are displayed in combinations of red, green, and blue light (RGB).
Hex values are written using the hashtag symbol (#), followed by either three or six hex characters.
As shown in the picture below, the circles overlap, forming new colors:
RGB color values are supported in all browsers.
Which color model does HTML use?
Color Values
All of the possible red, green, and blue combinations potentially number over 16 million.
Here are only a few of them:
We can mix the colors to form additional colors:
Orange and red mix:
Hexadecimal color values are supported in all browsers.
What would be the value of the color black in HTML, expressed by 6 hex characters?
#____
Background and Font Colors
The bgcolor attribute can be used to change the web page's background color.
This example would produce a dark blue background with a white headline:
Result:
The color attribute specifies the color of the text inside a <font> element.
Set the background color to white:
<body_______="__FFFFFF">
The <frame> Tag
A page can be divided into frames using a special frame document.
The <frame> tag defines one specific window (frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.
The <frameset> element specifies the number of columns or rows in the frameset, as well as what percentage or number of pixels of space each of them occupies.<frameset cols="100, 25%, *"></frameset>
<frameset rows="100, 25%, *"></frameset>
The <frameset> tag is not supported in HTML5.
What attributes does the frameset tag require to indicate its size?
Working with Frames
Use the <noresize> attribute to specify that a user cannot resize a <frame> element:<frame noresize="noresize">
Frame content should be defined using the src attribute.
Lastly, the <noframes> element provides a way for browsers that do not support frames to view the page. The element can contain an alternative page, complete with a body tag and any other elements.<frameset cols="25%,50%,25%">
<frame src="a.htm" />
<frame src="b.htm" />
<frame src="c.htm" />
<noframes>Frames not supported!</noframes>
</frameset>
The <frame> tag is not supported in HTML5.
Which attribute prevents a frame from resizing?
__________________
Blog Project
To finalize our blog, we'll use a frame to embed a YouTube video. We'll also create a Follow Me section that includes links at the end of the page.
Check out the final code:
TASK:
1. Finalize your blog page.
2. Share your code creation with the community, get feedback, and receive upvotes!
The sections in the blog project are created using the following tag:
When formatting text, can you get the same result when using different tags?
What does the href attribute contain?
Which tag contains the cell tags besides the table tag?
<__>
What does HTML stand for?
Choose the correct HTML tag for the largest heading:
Which of these tags are all table tags?
Align the text of the paragraph to the right:
<html>
<body align="center">
<div _____="______">
<body align="center">
<div _____="______">
<p>This is a line of text</p>
</div>
</body>
</html>
</div>
</body>
</html>
Challenge 1
Is width="100" and width="100%" the same?
Fill in the blanks to create an h1 heading containing the text "My first website" followed by an h2 tag containing "Sample Page":
<html>
<body>
<body>
<____>
My First Website</___>
<____>Sample Page</___>
</body>
</html>
</html>
Fill in the blanks to make the paragraph bold using the <b> tag:
<h1>Some heading</h1>
____ ______ I am learning HTML___
During page creation, which tag adds a page name that will show in the title bar of the user's Internet browser?
<______>
Fill in the blanks to make the text "First paragraph" a comment:
<html>
<body>
<body>
___First paragraph___
<p>Welcome to my webpage</p>
</body>
</html>
</body>
</html>
Fill in the blanks to display the image, "tree.jpg", at a 200px height and a 500px width:
<____ _____="tree.jpg"
height="200px" alt=""
______="________"/>
Fill in the blanks to create an ordered list:
<h4>An Ordered List:</___>
___
<li>Coffee</li>
<li>Tea</li>
<li>Milk___
<li>Tea</li>
<li>Milk___
</____>
HTML5
When writing HTML5 documents, one of the first new features that you'll notice is the doc type declaration:<!DOCTYPE HTML>
The character encoding (charset) declaration is also simplified:<meta charset="UTF-8">
New Elements in HTML5
<article>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <footer>, <header>, <nav>, <output>, <progress>, <section>, <video>, and even more!
The default character encoding in HTML5 is UTF-8.
Drag and drop from the options below to create a valid HTML5 doctype:
<_______ ___________>
<html>
<head>
<title>Title</title>
</head>
<body>
The content of the document
</body>
</html>
<head>
<title>Title</title>
</head>
<body>
The content of the document
</body>
</html>
<meta
HTML
charset="utf-8"
!DOCTYPE
HTML5
New in HTML5
Forms
- The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.
- Date pickers, color pickers, and numeric stepper controls have been added.
- Input field types now include email, search, and URL.
- PUT and DELETE form methods are now supported.
Integrated API (Application Programming Interfaces)
- Drag and Drop
- Audio and Video
- Offline Web Applications
- History
- Local Storage
- Geolocation
- Web Messaging
You will learn more about these new features in the upcoming lessons.
Tap the Continue button to begin!
Which element/feature is not new in HTML5?
The List of Content Models
In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models.
- Metadata
- Embedded
- Interactive
- Heading
- Phrasing
- Flow
- Sectioning
The HTML5 content models are designed to make the markup structure more meaningful for both the browser and the web designer.
Content Models
Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.
Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
Embedded: Content that imports other resources into the document.
Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>
Interactive: Content specifically intended for user interaction.
Elements: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>
Heading: Defines a section header.
Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
Phrasing: This model has a number of inline level elements in common with HTML4.
Elements: <img>, <span>, <strong>, <label>, <br />, <small>, <sub>, and more.
The same element can belong to more than one content model.
Where is the metadata located in an HTML5 document?
Content Models
Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.
Sectioning content: Defines the scope of headings, content, navigation, and footers.
Elements: <article>, <aside>, <nav>, <section>
The various content models overlap in certain areas, depending on how they are being used.
Which content model contains almost all of the others?
Page Structure in HTML5
A generic HTML5 page structure looks like this:
You may not need some of these elements, depending on your page structure.
Rearrange the following blocks to create a generalized HTML5 page structure.
<header>
<section>
<nav>
<footer>
<article>
The <header> Element
In HTML4, we would define a header like this:<div id="header">
In HTML5, a simple <header> tag is used, instead.
The <header> element is appropriate for use inside the body tag.
Note that the <header> is completely different from the <head> tag.
The header element is appropriate to use...
The <footer> Element
The footer element is also widely used. Generally we refer to a section located at the very bottom of the web page as the footer.<footer>…</footer>
The following information is usually provided between these tags:
- Contact Information
- Privacy Policy
- Social Media Icons
- Terms of Service
- Copyright Information
- Sitemap and Related Documents
Which tag specifies the footer element?
<____>
The <nav> Element
This tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with navigation links.
Here is an example of a major block of navigation links:
Not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don't need to be in a <nav> element.
Rearrange the sections to create a generic HTML5 page structure:
<footer>
<nav>
<head>
<header>
The <article> Element
Article is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content.
The <article> element replaces the <div> element that was widely used in HTML4, along with an id or class.
When an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.
Which element was usually used in HTML4 instead of the article tag?
<___>
The <section> Element
<section> is a logical container of the page or article.
Sections can be used to divide up content within an article.
For example, a homepage could have a section for introducing the company, another for news items, and still another for contact information.
Each <section> should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.
If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.
The section element should be used only inside an article element.
The <aside> Element
<aside> is secondary or tangential content which could be considered separate from but indirectly related to the main content.
This type of content is often represented in sidebars.
When an <aside> tag is used within an <article> tag, the content of the <aside> should be specifically related to that article.
When an <aside> tag is used outside of an <article> tag, its content should be related to the surrounding content.
The aside element is used to define:
Audio on the Web
Before HTML5, there was no standard for playing audio files on a web page.
The HTML5 <audio> element specifies a standard for embedding audio in a web page.
There are two different ways to specify the audio source file's URL. The first uses the source attribute:
The second way uses the <source> element inside the <audio> element:
Multiple <source> elements can be linked to different audio files. The browser will use the first recognized format.
Fill in the blanks to add an audio element:
<___controls>
<source___="test.ogg"
type="audio/ogg" ></audio>
Audio on the Web
The <audio> element creates an audio player inside the browser.
Result:
The text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.
The text in between the audio tags is:
Attributes of <audio>
controls
Specifies that audio controls should be displayed (such as a play/pause button, etc.)
autoplay
When this attribute is defined, audio starts playing as soon as it is ready, without asking for the visitor's permission.
loop
This attribute is used to have the audio replay every time it is finished.
Currently, there are three supported file formats for the <audio> element: MP3, WAV, and OGG.
Which of the following is not an attribute of the audio element?
Videos in HTML
The video element is similar to the audio element.
You can specify the video source URL using an attribute in a video element, or using source elements inside the video element:
Another aspect that the audio and video elements have in common is that the major browsers do not all support the same file types. If the browser does not support the first video type, it will try the next one.
Attributes of <video>
Another aspect shared by both the audio and the video elements is that each has controls, autoplay and loop attributes.
In this example, the video will replay after it finishes playing:
Currently, there are three supported video formats for the <video> element: MP4, WebM, and OGG.
Rearrange the code to create a valid video tag that will attempt to play the mp4 file first.
<video controls>
<source src="a.mp4" type="video/mp4">
<source src="a.ogg" type="video/ogg">
</video>
Video is not supported
Progress Bar
The <progress> element provides the ability to create progress bars on the web.
The progress element can be used within headings, paragraphs, or anywhere else in the body.
Progress Element Attributes
Value: Specifies how much of the task has been completed.
Max: Specifies how much work the task requires in total.
Example:
Result:
Use the <progress> tag in conjunction with JavaScript to dynamically display a task's progress.
Define a progress bar that shows 63 percent of progress:
<____
min="0"
max="100"
max="100"
____=" ">
</progress>
HTML5 Web Storage
With HTML5 web storage, websites can store data on a user's local computer.
Before HTML5, we had to use JavaScript cookies to achieve this functionality.
The Advantages of Web Storage
- More secure
- Faster
- Stores a larger amount of data
- Stored data is not sent with every server request
Local storage is per domain. All pages from one domain can store and access the same data.
Before HTML5, application data was stored in:
______________________
Types of Web Storage Objects
There are two types of web storage objects:
- sessionStorage()
- localStorage()
Local vs. Session
- Session Storage is destroyed once the user closes the browser
- Local Storage stores data with no expiration date
You need to be familiar with basic JavaScript in order to understand and use the API.
What are the two types of HTML5 web storage?
Select all that apply
Working with Values
The syntax for web storage for both local and session storage is very simple and similar.
The data is stored as key/value pairs.
Storing a Value:localStorage.setItem("key1", "value1");
Getting a Value://this will print the value
alert(localStorage.getItem("key1"));
Removing a Value:localStorage.removeItem("key1");
Removing All Values:localStorage.clear();
The same syntax applies to the session storage, with one difference: Instead of localStorage, sessionStorage is used.
Drag and drop from the options below to clear all values stored in the localStorage. Then store "a" using the key "b".
localStorage.____();
localStorage.
setItem(____,_____);
setItem(____,_____);
"key"
"value"
remove
"a"
"b"
clear
What is the Geolocation API?
In HTML5, the Geolocation API is used to obtain the user's geographical location.
Since this can compromise user privacy, the option is not available unless the user approves it.
Geolocation is much more accurate for devices with GPS, like smartphones and the like.
With the Geolocation API, you can obtain...
Using HTML Geolocation
The Geolocation API’s main method is getCurrentPosition, which retrieves the current geographic location of the user's device.navigator.geolocation.getCurrentPosition();
Parameters:
showLocation (mandatory): Defines the callback method that retrieves location information.
ErrorHandler(optional): Defines the callback method that is invoked when an error occurs in processing the asynchronous call.
Options (optional): Defines a set of options for retrieving the location information.
You need to be familiar with basic JavaScript in order to understand and use the API.
Which choice is the mandatory parameter of the getCurrentPosition() method?
Presenting Data
User location can be presented in two ways: Geodetic and Civic.
1. The geodetic way to describe position refers directly to latitude and longitude.
2. The civic representation of location data is presented in a format that is more easily read and understood by the average person.
Each parameter has both a geodetic and a civic representation:
The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.
What are the two known ways to present location specific data?
Select all that apply
Making Elements Draggable
The drag and drop feature lets you "grab" an object and drag it to a different location.
To make an element draggable, just set the draggable attribute to true:<img draggable="true" />
Any HTML element can be draggable.
The API for HTML5 drag and drop is event-based.
Example:<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="box" ondrop="drop(event)"
ondragover="allowDrop(event)"
style="border:1px solid black;
width:200px; height:200px"></div>
<img id="image" src="sample.jpg" draggable="true"
ondragstart="drag(event)" width="150" height="50" alt="" />
</body>
</html>
What to Drag
When the element is dragged, the ondragstart attribute calls a function, drag(event), which specifies what data is to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In our example, the data type is "text" and the value is the ID of the draggable element ("image").
Where to Drop
The ondragover event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event.
Do the Drop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).
The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.
The dragged data is the ID of the dragged element ("image").
At the end, the dragged element is appended into the drop element, using the appendChild() function.
Basic knowledge of JavaScript is required to understand and use the API.
How many times can HTML5 events be fired?
Drawing Shapes
SVG stands for Scalable Vector Graphics, and is used to draw shapes with HTML-style markup.
It offers several methods for drawing paths, boxes, circles, text, and graphic images.
SVG is not pixel-based, so it can be magnified infinitely with no loss of quality.
What does SVG stand for?
scalable_____graphics
Inserting SVG Images
An SVG image can be added to HTML code with just a basic image tag that includes a source attribute pointing to the image:<img src="image.svg" alt="" height="300" />
SVG defines vector-based graphics in XML format.
Fill in the blanks to add "my.svg" to the page:
<____ src="my.____"
width="300px" alt="" />
Drawing a Circle
To draw shapes with SVG, you first need to create an SVG element tag with two attributes: width and height.<svg width="1000" height="1000"></svg>
To create a circle, add a <circle> tag:
- cx pushes the center of the circle further to the right of the screen
- cy pushes the center of the circle further down from the top of the screen
- r defines the radius
- fill determines the color of our circle
- stroke adds an outline to the circle
Result:
Every element and every attribute in SVG files can be animated.
Fill in the blanks to create a red circle at the position X=50, Y=240:
<svg width="1000" height="1000">
<______ cx="50"_____ ="240"
r="10"____="red" />
</___>
Other Shape Elements
<rect> defines a rectangle:
The following code will draw a green-filled rectangle.
<line> defines a line segment:
(x1, y1) define the start coordinates(x2, y2) define the end coordinates.
<polyline> defines shapes built from multiple line definitions:
Points are the polyline's coordinates.
The code below will draw a black check sign:
The width and height attributes of the <rect> element define the height and the width of the rectangle.
Fill in the blanks to add a line to the page, starting from coordinates 10, 20 and ending at 50, 100:
<svg width="500" height="500">
<___x1="10"___="20"
___="50" y2="100" />
</svg>
<ellipse> and <polygon>
Ellipse
The <ellipse> is similar to the <circle>, with one exception:
You can independently change the horizontal and vertical axes of its radius, using the rx and ry attributes.
Result:
Polygon
The <polygon> element is used to create a graphic with at least three sides. The polygon element is unique because it automatically closes off the shape for you.
Result:
Polygon comes from Greek. "Poly" means "many" and "gon" means "angle."
Which of the following is an HTML5 SVG shape?
Shape Animations
SVG animations can be created using the <animate> element.
The example below creates a rectangle that will change its position in 3 seconds and will then repeat the animation twice:
attributeName: Specifies which attribute will be affected by the animation
from: Specifies the starting value of the attribute
to: Specifies the ending value of the attribute
dur: Specifies how long the animation runs (duration)
fill: Specifies whether or not the attribute's value should return to its initial value when the animation is finished (Values: "remove" resets the value; "freeze" keeps the “to value”)
repeatCount: Specifies the repeat count of the animation
In the example above, the rectangle changes its x attribute from 0 to 300 in 3 seconds.
To repeat the animation indefinitely, use the value "indefinite" for the repeatCount attribute.
Which tag is used to create shape animations?
<____>
Paths
The <path> element is used to define a path.
The following commands are available for path data:
M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bézier curve
T: smooth quadratic Bézier curveto
A: elliptical Arc
Z: closepath
Define a path using the d attribute:
M places our "virtual pen" down at the position 0, 0. It then moves 200px down and to the right, then moves up to the position 200, 0. The Z command closes the shape, which results in a hypotenuse:
All of the above commands can also be expressed with lower case letters. When capital letters are used, it indicates absolute position; lower case indicates relative position.
Which shape is indicated by the following path?
<path d="M0 0 L0 100
L100 100 L100 0 Z" />
<path d="M0 0 L0 100
L100 100 L100 0 Z" />
The <canvas> Element
The HTML canvas is used to draw graphics that include everything from simple lines to complex graphic objects.
The <canvas> element is defined by:<canvas id="canvas1" width="200" height="100">
</canvas>
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics (usually JavaScript).
The <canvas> element must have an id attribute so it can be referred to by JavaScript:<html>
<head></head>
<body>
<canvas id="canvas1"
width="400" height="300"></canvas>
<script>
var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
</script>
</body>
</html>
getContext() returns a drawing context on the canvas.
Basic knowledge of JavaScript is required to understand and use the Canvas.
You can draw on the canvas using...
Canvas Coordinates
The HTML canvas is a two-dimensional grid.
The upper-left corner of the canvas has the coordinates (0,0).
X coordinate increases to the right.
Y coordinate increases toward the bottom of the canvas.
The <canvas> element is only a container for graphics.
X and Y are...
Drawing Shapes
The fillRect(x, y, w, h) method draws a "filled" rectangle, in which w indicates width and h indicates height. The default fill color is black.
A black 100*100 pixel rectangle is drawn on the canvas at the position (20, 20):
Result:
The fillStyle property is used to set a color, gradient, or pattern to fill the drawing.
Using this property allows you to draw a green-filled rectangle.
Result:
The canvas supports various other methods for drawing:
Draw a Line
moveTo(x,y): Defines the starting point of the line.
lineTo(x,y): Defines the ending point of the line.
Draw a Circle
beginPath(): Starts the drawing.
arc(x,y,r,start,stop): Sets the parameters of the circle.
stroke(): Ends the drawing.
Gradients
createLinearGradient(x,y,x1,y1): Creates a linear gradient.
createRadialGradient(x,y,r,x1,y1,r1): Creates a radial/circular gradient.
Drawing Text on the Canvas
Font: Defines the font properties for the text.
fillText(text,x,y): Draws "filled" text on the canvas.
strokeText(text,x,y): Draws text on the canvas (no fill).
There are many other methods aimed at helping to draw shapes and images on the canvas.
fillRect (36,10,22,12) indicates a rectangle with a height of...
Posts
https://codeprozone.com/code/cpp/33583/expected-unqualified-id-before-if.html
ReplyDeleteexpected unqualified-id before 'if