Chapter: 1 Welcome to HTML! HTML stands for H yper T ext M arkup L anguage. 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: <p> I'm a paragraph </p> HTML Try it Yourself This course is a combination of interactive quizzes and exercises to facilitate spe ed and quality of learning. What does a markup language use to identify content? A. scripts B. tags C. commands D. functions 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! The Web Structure Rearrange the code to surround the text "I am learning HTML on SoloLea...
Get link
Facebook
X
Pinterest
Email
Other Apps
HTML Basics
Get link
Facebook
X
Pinterest
Email
Other Apps
Chapter:6
Heading, Lines and Comments
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:
<html>
<head>
<title>first page</title>
</head>
<body>
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body>
</html>
HTML
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.
HTML Headings
What tags are used to indicate headings?
heading
head
header
h1 - h6
Horizontal Lines
To create a horizontal line, use the <hr> tag.
<html>
<head>
<title>first page</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>This is a paragraph </p>
<hr> <p>This is a paragraph </p>
</body>
</html>
HTML
Result:
In HTML5, the <hr> tag defines a thematic break.
Horizontal Lines
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 -->
HTML
Example:
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph </p>
<hr />
<p>This is a paragraph </p>
<!-- This is a comment --> </body>
</html>
HTML
Result:As you can see, the comment is not displayed in the browser.
Visual Appearance
Make your first and last name stand out!
There is an exclamation point (!) in the opening tag, but not in the closing tag.
Chapter:7
Paragraphs
The <p> Element
To create a paragraph, simply type in the <p> element with its opening and closing tags:
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph. </p> <p>This is another paragraph. </p> </body>
</html>
HTML
The result:
Browsers automatically add an empty line before and after a paragraph.
The <p> Element
Drag and drop from the options below to create paragraphs:
<p>
HTML is easy!</p>
<p>HTML is fun!
</p>
Single Line Break
Use the <br /> tag to add a single line of text without starting a new paragraph:
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph. </p>
<p>This is <br /> a line break </p>
</body>
</html>
HTML
The <br /> element is an empty HTML element. It has no end tag.
Single Line Break
What tag is used to create a line-break without an extra space between the text blocks?
br
lb
linebreak
break
Single Line Break
Fill in the blanks:
<html>
<body>
<p>This is a paragraph </>
<p> This is </> a line break </p>
</body>
</html>
Chapter:8
Text Formatting
Formatting Elements
In HTML, there is a list of elements that specify text style.
Formatting elements were designed to display special types of text:
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is regular text </p>
<p><b> bold text </b></p>
<p><big> big text </big></p>
<p><i> italic text </i></p>
<p><small> small text </small></p>
<p><strong> strong text </strong></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
</body>
</html>
HTML
The <strong> tag is a phrase tag. It defines important text.
Formatting Elements
Which two tags below make the text visually bold?
ins and del
i and em
sub and sup
b and strong
Formatting Elements
Each paragraph in the example is formatted differently to demonstrate what each tag does:
My Occupation
Add your profession to your CV.
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".
Formatting Elements
Fill in the correct tags:
<> important text <strong>
<> subscripted text </>
Chapter:9
Blog Project: About me
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:
<h1><span>About Me</span></h1>
<p>
Hey! I'm <strong>Alex</strong>. Coding has changed my world ...
</p>
<p class="quote">"Declare variables, not war"</p>
HTML
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!
Tell Us More About Yourself
Write a professional summary.
TASK: 1. Create your own About Me section by changing the text. 2. Play around with the code; experiment with formatting text.
Formatting Text
Fill in the blanks to form a valid HTML:
<p>
Some quote <br />
<> - by some author</i>
<>
Chapter:10
Elements
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".
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph <br /></p>
</body>
</html>
HTML
Some HTML elements (like the <br /> tag) do not have end tags.
HTML Elements
General HTML elements consist of:
the body tag
opening tag, content, closing tag
only content
only tags
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.
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is a <br /> line break</p>
</body>
</html>
HTML
Some HTML elements (like the <br /> tag) do not have end tags.
HTML Elements
Fill in the blanks:
<html>
<><title>Title</></head>
<body>
<p>Some text</p>
</body>
</html>
Chapter:11
Attributes
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.
<p align="center">
This text is aligned to center
</p>
HTML
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.
HTML Attributes
What is the role of an attribute in HTML?
the tag cannot have attributes
it modifies the tag
it serves just as a comment
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:
<hr width="50px" />
HTML
An element's width can also be defined using percentages:
<hr width="50%" />
HTML
An element's width can be defined using pixels or percentages.
Attribute Measurements
What measurement units can be used for the width attribute?
km and meter
pixel and %
no measurement units are used
all existing measurement units
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.
<html>
<head>
<title>Attributes</title>
</head>
<body>
<p align="center">This is a text <br />
<hr width="10%" align="right" /> This is also a text.
</p>
</body>
</html>
HTML
The align attribute of <p> is not supported in HTML5.
The Align Attribute
What attribute is used to align the contents of an element to the right, center or left?
location
alignment
align
direction
Attributes
You may be wondering what happens if you try to apply contradictory attributes within the same element.
<p align="center">
This is a text.
<hr width="50%" align="left" />
</p>
HTML
The align attribute of <p> is not supported in HTML5.
Attributes
Which attribute is used to align the content of a paragraph to the right?
<p ="right">
Chapter:12
Images
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:
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.
Chapter:15
Tables
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 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.
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.
The align and bgcolor Attributes
What attribute is used to change the color of a cell?
bgcolor
cellColor
color
background
Chapter:16
Links
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>
HTML
To link an image to another document, simply nest the <img> tag inside <a> tags.
The <a> Tag
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:
<a href="http://www.sololearn.com"> Learn Playing </a>
HTML
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.
Creating Your First Link
Which attribute of the link tag contains the URL location that you are trying to link to?
address
location
target
href
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 href="http://www.sololearn.com" target="_blank">
Learn Playing
</a>
HTML
Keep In Touch
Add your contact information to your CV.
A visited link is underlined and purple.
Chapter:17
Blog Project: My Schedule
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!
My Schedule
Fill in the blanks to create a valid table:
<table>
<>
<td>A</td>
<td>B<>
</tr>
</table>
Chapter:18
Inline and Block Elements
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.
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.
Types of Elements
Can you insert a block element inside an inline element?
No
Yes
Chapter:19
Forms
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>
HTML
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>
UNDEFINED
Usually the form is submitted to a web page on a web server.
The <form> Element
Which attribute contains the URL address of the webpage that is loaded after a form submission?
method
id
action
name
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">
HTML
<form action="url" method="POST">
HTML
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:
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.
Completing Your CV
Add a field for a message and a submission button!
TASK: Check out the code and customize the form to fit your needs!
Contact Form
To support multiple lines of input you should use the following element:
multipletext
text
textarea
Chapter:21
HTML Colours
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?
0-f
0-9
a-z
0-z
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.
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.
Color Values
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:
The color attribute specifies the color of the text inside a <font> element.
Background and Font Colors
Set the background color to white:
<body ="FFFFFF">
Chapter:22
Frames
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.
What attributes does the frameset tag require to indicate its size?
height and size
rows and cols
width and length
thickness and border
Working with Frames
Use the <noresize> attribute to specify that a user cannot resize a <frame> element:
<frame noresize="noresize">
HTML
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.
Chapter: 1 Welcome to HTML! HTML stands for H yper T ext M arkup L anguage. 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: <p> I'm a paragraph </p> HTML Try it Yourself This course is a combination of interactive quizzes and exercises to facilitate spe ed and quality of learning. What does a markup language use to identify content? A. scripts B. tags C. commands D. functions 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! The Web Structure Rearrange the code to surround the text "I am learning HTML on SoloLea...
Comments
Post a Comment