Scribd
Upload
12 views

Week 2 Basics of HTML Part2 Note

Uploaded by

minalukassa9
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Week 2 Basics of HTML Part2 Note

Uploaded by

minalukassa9
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

3.

Basics of HTML - part II


3.1 Introduction

• In this class, we will be building an HTML page that contains the most used tags with
special focus on:

o Image tag, anchor tag, headings (h1 to h6), lists (ordered and unordered lists),
form tag, video tag and image tag

3.2 Steps to create an HTML Page

• Steps to create an HTML page (.html)

▪ Step 1, always create a folder for every project you work on

• To do this, go to your favorite working location and create a folder -


Give the folder a proper name that relates with your project

▪ Step 2, open the folder using your editor (VSC)

• On the Visual Studio menu bar, choose File > Open > Folder, and then
browse to the code location

• You can also go to the folder you created right-click on it and select”
open in Visual Studio Code”

▪ Step 3, create an HTML document

• An HTML document is a simple text file with a .html extension. Then,


save that file within your working folder

▪ Step 4, define the DOCTYPE

• The first line of any HTML document starts by defining the HTML
doctype. Because we are writing the HTML5 standard, the way to define
the doctype is just including the following line of code at the top of the
document

<!DOCTYPE html>

▪ Step 5: Include the initial HTML5 boilerplate


• What is an HTML boilerplate?

o HTML boilerplate is a standard template code used when


building HTML pages. As an HTML developer, you will use this
basic structure of an HTML document when building any HTML
page.

o HTML boilerplate includes the following HTML tags: <html>,


<head> and <body> tags.
- Please make sure all of them are closed properly

• How do we add HTML boilerplate in VSC?

o One way is by just typing “html” in your .html file, and selecting
html5 from the list Emmet suggests

o The other way is by simply striking the “!” key from your
keyboard and press “enter” key at the same time

▪ Step 6: Give a title for your HTML document

• This is defined with in the <title> tag under the <head> section. At this
point, you would have a starter HTML document ready

▪ Step 7: Start including contents into your HTML document

• The main content of your HTML document is included with in the


<body> tag. Only the contents that you write within the <body> tag will
be displayed on your browser. It can contain text content, paragraphs,
headings, images, tables, links, videos, etc.

3.3 Common HTML tags (nav, anchor, list items)

• Please refer to the class video demonstrating how we can use <nav>, <anchor>, <ul>,
<ol> and <li> tags our HTML

3.4 Common HTML tags (header, section, div, footer)

• Please refer to the class video demonstrating how we can use <header>, <section>, <div>
and <footer> tags our HTML

3.5 Common HTML tags (h1, h2, h3, h4, h5, h6, hr)
• Please refer to the class video demonstrating how we can use <h1>, <h2>, <h3>, <h4,
<h5>, <h6> and <hr> tags our HTML

3.6 Common HTML tags (img)

• Please refer to the class video demonstrating how we can use <img> tag our HTML

3.7 Common HTML tags (form, video and iframe)

• Please refer to the class video demonstrating how we can use <form>, <video>, and
<iframe> tags our HTML

You might also like