Scribd
Upload
21 views5 pages

HTML SL

The document provides an introduction to HTML and covers topics like HTML versions and tags. It explains the basics of writing HTML code in Visual Studio Code and commonly used HTML5 tags like headings, paragraphs, lists, images, and forms.

Uploaded by

ab ka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views5 pages

HTML SL

The document provides an introduction to HTML and covers topics like HTML versions and tags. It explains the basics of writing HTML code in Visual Studio Code and commonly used HTML5 tags like headings, paragraphs, lists, images, and forms.

Uploaded by

ab ka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Basics of HTML - part I

1.1 Introduction to HTML

 Knowing how to code in any language is an extremely useful skill.


 Regardless of how complex a website is, it is still built with HTML, the basic building blocks of
the web. The frameworks used to build websites are HTML and CSS. When it comes to building
websites, you'll be much better off if you understand how they interact.
1.2 Understanding HTML

 What is HTML?
o It is just a standardized system of tagging a text file.
o A text file that is "tagged" following the "HTML standard" is called an HTML document.
o This standard is followed by both web developers and web browsers in order to produce
expected results.
 HTML versions
o HTML has 5 versions so far, ranging from HTML 1.0 to the most recent, HTML5.
 DOCTYPE
o DOCTYPE is not an HTML tag. It is simply an instruction for your browser to tell which version
of HTML your document is using.
o 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 includes multimedia elements, which means that browsers that support HTML 5 can
also play video and audio.
 Includes semantic content by including <header>, <footer>, <article>, <section>,
and <figure> tags.
 Why should you learn HTML? (Purpose of learning HTML)
o The primary goal of learning HTML is to understand how to properly tag your text documents so
that the browser understands what you are attempting to accomplish.
o For example, if you want to include a title in a text document, how could you tell that it's a title?
Or, if you want to include a paragraph, how do you tell it's a paragraph, and so on.
o To accomplish this, simply adhere to a standard that browsers can comprehend.
1.3 How to write HTML code in VSC

 The following are the most common tasks you do using Visual Studio Code:
o Open existing folder or file
o Create a new folder in a specific location
o Create a new file in a specific location
o Make edits and save
o Rename files and/or folders
 Here is a list of VSC extensions (which adds extra features to VSC) that you must install:
o Open in default browser (by peakchen90): to quickly open an HTML file in a browser.
o Live Server (by Ritwick Dey): Launches a development local server with live reload feature for
static & dynamic pages.
o Material icon theme (by Philipp Kief): provides lots of icons based on Material Design for VSC.
o Prettier (by Prettier): a tool that automatically makes your code more readable or formatted.
o Auto rename tag (by Jun Han): automatically renames paired HTML/XML tags.
o 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 your HTML file.
o Indent rainbow (by Odewart): makes indentation easier to read.
o JS Snippet (by Gajesh Panigrahi): Javascript, typescript, bootstrap, ES6, typescript-react, react,
react-router code snippet
1.4 Basic rules of HTML tags

 What do HTML tags do?


o Tags provide web browsers with instructions about the type of the texts included in the HTML
document.
o HTML tags are hidden keywords within a web page that specify how your browser should format
and display the content.
 Examples:
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?
1. Tags are always enclosed in angle brackets: < >
 Example: Look how this paragraph tag is enclosed with angle brackets: <p>
2. Tags usually come in pairs: An opening tag and a closing tag

1.4 Most Commonly used HTML5 Tag

• 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>
https://www.impactplus.com/blog/21-basic-html-codes-everyone-whos-not-a-developer-should-know

https://www.tutorialrepublic.com/html-reference/html5-tags.php

Comment Out on HTML


• <!-- Write your comments here -->

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:
 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 to 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?
 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.
 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?
 One way is by just typing "html" in your .html file, and selecting html5 from the
list Emmet suggests.
 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 within 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 within 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 in 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 in 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 in our HTML.
3.6 Common HTML tags (img)
 Please refer to the class video demonstrating how we can use <img> tag in 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
in our HTML.

You might also like