1.2.1.Getting started with HTML - quanganh2001/meta-front-end-developer-professional-certificate-coursera GitHub Wiki
In this exercise you will you will practice creating a simple HTML document.
- View -> Editor Layout -> Two Columns
- To view this file in Preview mode, right click on this README.md file and
Open Preview- Select your code file in the code tree, which will open it up in a new VSCode tab.
- Drag your assessment code files over to the second column.
- Great work! You can now see instructions and code at the same time.
Objectives
- Add the DOCTYPE.
- Add the HTML, head and body elements.
- Add the title element.
- Add the text to the body element.
Follow the Step by Step instructions below:
-
Open the
index.htmlfile. -
Type
<!DOCTYPE html>on the first line. -
Create your
htmlelement on the next line. This will be the root element of the document. -
Add the
headelement inside thehtmlelement. The head element contains data about the HTML document that does not display in the web browser. -
Add the
titleelement inside theheadelement. -
Add the text
My First HTML Documentinside thetitleelement. The content of thetitleelement is the text that will be displayed in the web browser tab. -
Close the
headtag and add thebodyelement. The ``body element contains all displayable content of the webpage. -
Add the text
I successfully created my first documentinside thebodyelement. This displays on the webpage.
Nice work! To complete this assessment:
- Save your file through File -> Save
- Select "Submit Assignment" in your Lab toolbar.
Your code will be autograded and return feedback shortly on the "Grades" tab.
You can also see your score in your Programming Assignment "My Submission" tab.
- Ensure that the DOCTYPE is declared at the beginning of the file.
- Remember that HTML documents have a specific structure.
- Review the lessons What is HTML? and HTML Documents.
There are many tags available in HTML. Here you will learn about common tags that you'll use as a developer.
Headings allow you to display titles and subtitles on your webpage.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>The following displays in the web browser:
Paragraphs contain text content.
<p>
This paragraph
contains a lot of lines
but they are ignored.
</p>The following displays in the web browser.
Note that putting content on a new line is ignored by the web browser.
As you've learned, line breaks in the paragraph tag line are ignored by HTML. Instead, they must be specified using the <br> tag. The <br> tag does not need a closing tag.
<p>
This paragraph<br>
contains a lot of lines<br>
and they are displayed.
</p>The following displays in the web browser:
Strong tags can be used to indicate that a range of text has importance.
<p>
No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
</p>The following displays in the web browser:
Bold tags can be used to draw the reader's attention to a range of text.
<p>
The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
</p>The following displays in the web browser:
Bold tags should be used to draw attention but not to indicate that something is more important. Consider the following example:
The three core technologies of the Internet are <b>HTML</b>, <b>CSS</b> and <b>Javascript</b>.The following displays in the web browser:
Emphasis tags can be used to add emphasis to text.
<p>
Wake up <em>now</em>!
</p>The following displays in the web browser:
Italics tags can be used to offset a range of text.
<p>
The term <i>HTML</i> stands for HyperText Markup Language.
</p>The following displays in the web browser:
By default both tags will have the same visual effect in the web browser. The only difference is the meaning.
Emphasis tags stress the text contained in them. Let's explore the following example:
I <em>really</em> want ice cream.The following displays in the web browser:
Italics represent off-set text and should be used for technical terms, titles, a thought or a phrase from another language, for example:
My favourite book is <i>Dracula</i>.The following displays in the web browser:
Screen readers will not announce any difference if an italics tag is used.
You can add lists to your web pages. There are two types of lists in HTML.
Lists can be unordered using the <ul> tag. List items are specified using the <li> tag, for example:
<ul>
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>This displays in the web browser as:
Lists can also be ordered using the <ol> tag. Again, list items are specified using the <li> tag.
<ol>
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>This displays as the following in the web browser.
A <div> tag defines a content division in a HTML document. It acts as a generic container and has no effect on the content unless it is styled by CSS.
The following example shows a <div> element that contains a paragraph element:
<div>
<p>This is a paragraph inside a div</p>
</div>This displays as the following in the web browser.
It can be nested inside other elements, for example:
<div>
<div>
<p>This is a paragraph inside a div that’s inside another div</p>
</div>
</div>This displays in the web browser as:
As mentioned, the div has no impact on content unless it is styled by CSS. Let’s add a small CSS rule that styles all divs on the page.
Don't worry about the meaning of the CSS just yet, you'll explore CSS further in a later lesson. In summary, you're applying a rule that adds a border and some visual spacing to the element.
<style>
div {
border: 1px solid black;
padding: 2px;
}
</style>
<div>
<div>
<p>This is a paragraph inside stylized divs</p>
</div>
</div>This displays in the web browser as:
Div elements are an important part of building webpages. More advanced usage of div elements will be explored in another course.
If you want to leave a comment in the code for other developers, it can be added as:
<!-- This is a comment --> The comment will not be displayed in the web browser.
An HTML document begins with ______________.
A. The html tag
B. The DOCTYPE declaration
C. The head tag
D. The body tag
An HTML document begins with the DOCTYPE declaration. Explain: An HTML document always begins with a DOCTYPE declaration followed by the html tag.
To display a link to another HTML document, the ______________ tag is used.
A. link
B. html
C. anchor (a)
D. img
To display a link to another HTML document, the anchor tag is used. Explain: The anchor tag is used to link to another HTML document.
To add an image to a webpage, the ______________ tag is used.
A. img
B. image
C. anchor (a)
D. link
To add an image to a webpage, the img tag is used. Explain: The img tag is used to include images in an HTML document.
To represent the HTML document in JavaScript, the browser builds _____________.
A. an HTML Element Model
B. an HTML Script
C. Document Object Model
To represent the HTML document in JavaScript, the browser builds Document Object Model. Explain: A Document Object Model (DOM) is built to represent the HTML document in JavaScript.
Which of the following answer choices improves web accessibility for people with disabilities? Select all that apply.
- Correct HTML structure
- Accessible Rich Internet Application (ARIA) techniques
- Appropriate use of HTML elements
Explain: Ensuring correct HTML structure will help assistive technologies to describe, navigate and interact with the content. ARIA techniques improve accessibility for complex web applications. Using HTML elements appropriately such as using paragraph tags for text and button tags for buttons will help assistive technologies to describe, navigate and interact with the content.
Here is a list of resources that may be helpful as you continue your learning journey.