Scribd
Upload
21 views

2 Basics of HTML Part I Class Note

The document discusses the basics of HTML including its purpose, structure, common tags, and how to write HTML code in Visual Studio Code. It covers understanding HTML, versions and DOCTYPE declarations, basic rules of HTML tags, and steps to build a simple HTML page including adding boilerplate code and content.

Uploaded by

Habtie Walle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

2 Basics of HTML Part I Class Note

The document discusses the basics of HTML including its purpose, structure, common tags, and how to write HTML code in Visual Studio Code. It covers understanding HTML, versions and DOCTYPE declarations, basic rules of HTML tags, and steps to build a simple HTML page including adding boilerplate code and content.

Uploaded by

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

2.

Basics of HTML - part I


2.1 Introduction to HTML

• Knowing how to code in any language is a valuable skill. Despite how complex websites
may be, they are still built with the fundamental blocks of the web, HTML. HTML and CSS
are the frameworks used to build websites. If you can understand how they work together,
you’re much better off when it comes to building websites.

2.2 Understanding HTML

• What is HTML?
▪ It is just a standardized system of tagging a text file
▪ A text file that is "tagged" following the "HTML standard" is called an HTML
document
▪ Both web developers and web browsers follow this standard to generate expected
outcomes
• HTML versions
▪ There are 5 versions of HTML so far, from HTML 1.0 to the most recent one,
HTML5.
• DOCTYPE
▪ It is not an HTML tag. It is just an instruction for your browser to tell what version
of HTML your document is using
▪ DOCTYPE declarations:
• For HTML5, use this only: <!DOCTYPE html>
• For HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" http://www.w3.org/TR/html4/strict.dtd>
• For this course, you only need to focus on HTML5. Reasons:
▪ Browsers understand earlier versions anyways
▪ HTML5 is simplified
▪ HTML5 has better error handling ways
▪ HTML5 has multimedia elements, meaning, browsers that support HTML 5 are also
media players for video and audio
▪ Includes semantic content by including <header> <footer>, <article>, <section> and
<figure>
• Purpose of learning HTML
▪ The main purpose of learning HTML is to know how to properly tag your text
documents in a way that the browser understands what you are trying to accomplish.
Ex. If you are trying to include a title in the text document, how do you say it is a
title. Or, if you want to include a paragraph, how do you say it is a paragraph and so
on. To do this, you just follow the standard that browsers can understand.
2.3 How to write HTML code in VSC

• Here are the most common tasks you do using Visual Studio Code
▪ Open existing folder or file
▪ Create a new folder in a specific location
▪ Create a new file in a specific location
▪ Make edits and save
▪ Rename files and/or folders
• Here is a list of VSC extensions (add extra feature to VSC) you must install:
▪ Open in default browser (by peakchen90): to fast open html file in browser
▪ Live Server (by Ritwick Dey): Launch a development local Server with live reload
feature for static & dynamic pages
▪ Material icon theme (by Philipp Kief): provides lots of icons based on Material
Design for VSC
▪ Prettier (by Prettier): a tool that automatically makes your code more readable or
formatted
▪ Auto rename tag (by Jun Han): automatically renames paired HTML/XML tags
▪ CSS Peek (by Pranay Prakash): to check the properties attached to a css class or id
from your HTML file. With CSS Peek, you can view a hover image of your CSS
from within you HTML file.
▪ Bracket colorizer (by CoenraadS): for colorizing matching brackets
▪ Indent rainbow (by Odewart) : makes indentation easier to read
▪ JS Snippet (by Gajesh Panigrahi) Javascript, typescript, bootstrap, ES6, typescript-
react, react, react-router code snippet
2.4 Basic rules of HTML tags

• Why do HTML tags do? Tags provide web browsers with instructions about the type of the
texts included in the html document. HTML tags are the hidden keywords within a web page
that define how your web browser must format and display the content. For example,
o <h1> h1 means this text is a header </h1>
o <p> p means this text is a paragraph <p/>
• What are rules of HTML tags?
o 1. Tags are always enclosed in angle brackets: < > Ex: look how this paragraph
tag is enclosed with angle bracket: <p>
o 2. Tags usually come in pairs: An opening tag and a closing tag. Ex. Paragraph
tag <p> Content of the <b>paragraph</b> goes in between the
opening and the closing tag. </p>
▪ The opening paragraph (<p>) tag indicates where the paragraph starts and
the closing tag (</p>) shows where it ends
o 3. A few tags are called non-container tags. This means, they don't contain any
content within them. Because they do not contain anything within them or because
they do not actually mark anything up, there is no need for them to have closing tag.
Ex:
▪ <br>
▪ <hr>
▪ <img>
o 4. Tags are comprised of elements and attributes. Examples:
▪ Image tag with attribute width:
• <img src="../apple.png" width="500px" height="400px"
alt="Apple's logo">
• The image tag (<img>) is the element and width and src in it are the
attributes of the element.
▪ Anchor tag with hypertext reference:
• <a href="https://www.apple.com/"> Apple Website </a>
▪ Notice that attributes are not included in between the opening and closing
tags. They are rather included with in the opening tag itself only.

o The basic skeleton of every web page looks like this:

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

• The first tag in any HTML file is the <html> tag. This tells web browsers that
the document is an HTML file.
• The second tag is a <head> tag. Information between the <head> tags, called
meta information, don't appear in the browser window but are still important.
The most important meta information in the HEAD tag is the <title> tag.
Generally, the title should reflect the contents of the page
• The true content of your web page is included inside the <body> tag

2.5 Building your first 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.

2.6 Most commonly used HTML5 tags

• Structural Tags
▪ <html>
▪ <head>
▪ <body>
▪ <header>
▪ <nav>
▪ <section>
▪ <div>
▪ <h1> to <h6>
▪ <a>
▪ <p>
▪ <br>
▪ <hr>
▪ <footer>
• Metadata Tags
▪ <link>
▪ <style>
▪ <title>
▪ <meta>
• Form Tags
▪ <form>
▪ <input>
▪ <textarea>
▪ <button>
• Formatting Tags
▪ <b>
▪ <center>
▪ <em>
▪ <small>
▪ <strong>
▪ <sup>

• List Tags
▪ <ul>
▪ <ol>
▪ <li>
• Scripting Tags
▪ <script>
• Embedded Content Tags
▪ <img>
▪ <video>
▪ <iframe>
• Commenting and commenting out in HTML
▪ Comments in HTML are used to add text to an HTML document without including
that text in the Web page. HTML comments are not displayed in the browser and
can be used to hide content temporarily. You can add comments to your HTML
source by using the following syntax:
• <!-- Write your comments here -->
• Refer the following link to see a complete list of standard tags belonging to the latest
HTML5. From the list, identify the ones selected above and read about each of them.
Understand what each of them represent when used as tags.
▪ https://www.tutorialrepublic.com/html-reference/html5-tags.php

2.7 Building Apple.com's terms and policy page in class (demo)

• For this section, please watch the video demonstrating how Apple.com’s terms and policy is
built using HTML in class

You might also like