HTML Updates
Updates on HTML lessons.
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:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<body>
<!-- About Me section start -->
<div class="section">
<h1><span>About Me</span></h1>
<p>
Hey! I'm <strong>Alex</strong>. Coding has changed my world. It's not just about apps. Learning to code gave me <i>problem-solving skills</i> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at <strong>SoloLearn</strong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
</p>
<p class="quote">"Declare variables, not war"</p>
</div>
<!-- About Me section end -->
</body>
</html>
TASK:
1. Create your own About Me section by changing the text.
2. Play around with the code; experiment with formatting text.
3. Modify every code with what you have learnt so far.
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 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 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.
Attributes are always specified in the start tag, and they appear in name="value" pairs.
<p align="center">
This text is aligned to center
</p>
In this example, the value of "center" indicates that the content within the p element should be aligned to the center:
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" />
OR
<hr width="50%" />
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>
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:
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:
<html>
<head>
<title>My Blog</title>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<body>
<!-- About Me section start -->
<div class="section">
<h1><span>About Me</span></h1>
<p>
Hey! I'm <strong>Alex</strong>. Coding has changed my world. It's not just about apps. Learning to code gave me <i>problem-solving skills</i> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at <strong>SoloLearn</strong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
</p>
<p class="quote">"Declare variables, not war"</p>
</div>
<!-- About Me section end -->
</body>
</html>
1. Create your own About Me section by changing the text.
2. Play around with the code; experiment with formatting text.
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 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 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 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 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.
Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.
Attributes are always specified in the start tag, and they appear in name="value" pairs.
<p align="center">
This text is aligned to center
</p>
This text is aligned to center
</p>
In this example, the value of "center" indicates that the content within the p element should be aligned to the center:
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:
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" />
OR
<hr width="50%" />
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 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>
<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>
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:
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:
Comments
Post a Comment
Please leave your comments to help us serve you better