Scribd
Upload
2 views

ITEC50 Lesson 2

HTML, or HyperText Markup Language, is the standard language for creating and structuring content on the web, serving as the foundational building block for websites. It is essential for web development, allowing customization of content and understanding of web structure, with a projected growth in employment opportunities for web developers. HTML has evolved since its inception in 1991, with the latest version being HTML5, and is compatible with other technologies like CSS and JavaScript for enhanced functionality.

Uploaded by

Denver Garcia Breis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

ITEC50 Lesson 2

HTML, or HyperText Markup Language, is the standard language for creating and structuring content on the web, serving as the foundational building block for websites. It is essential for web development, allowing customization of content and understanding of web structure, with a projected growth in employment opportunities for web developers. HTML has evolved since its inception in 1991, with the latest version being HTML5, and is compatible with other technologies like CSS and JavaScript for enhanced functionality.

Uploaded by

Denver Garcia Breis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

Lesson 2:

Hypertext
Markup
Language
(HTML)

Romel Griego
Instructor I
Department of Industrial and Information Technology
HTML

Stands for HyperText Markup Language. It is the


standard language used to create and structure
content on the web.
• HTML is a markup language, not a programming
language, meaning it annotates text to define how it
is structured and displayed by web browsers.
• It forms the building blocks of all websites and is
complemented by CSS for style and JavaScript for
interactivity.
HTML

In a nutshell, HTML is all about organizing and


displaying information on a webpage. We can think of
it as the bones or structure of a webpage.
Basic HTML Code Example

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
Why Learn HTML?

• Build Websites: HTML is the basic building block for


creating any website. Learning HTML can help you
pursue a career in web development.
• Customize Content: Allows you to edit or tweak
web pages, emails, or templates to fit your needs.
• Understand how the web works: Helps you grasp
how the internet works and how web pages are
structured.
Why Learn HTML?

• Employment Opportunities: According to Bureau


of Labor Statistics projects that employment for web
developers will grow 16% between 2022-2032, which
is much faster than the average across all
occupations.
• Learn Easily: HTML is beginner-friendly, making it a
great first step into the world of coding and
technology
HTML History
Currently, we are using HTML5, which is the latest and most
advanced version of HTML.

HTML was initially created by Tim Berners-Lee in 1991 as a


way to share and structure documents on the web.

The first-ever version was HTML 1.0, a basic and limited


version. However, the first standardized version, HTML 2.0,
was published in 1995, laying the foundation for web
development as we know it today
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
Year Version
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
2008 WHATWG HTML5 First Public Draft
Advantages of HTML

• HTML is used to build websites.


• It is supported by all browsers.
• It can be integrated with other languages
like CSS, JavaScript, etc.
Disadvantages of HTML

• HTML can only create static web pages. For


dynamic web pages and logic, we need
JavaScript.
• A large amount of code has to be written to
create a simple web page.
HTML Element and HTML Tag
HTML Element and HTML Tag

HTML Element and HTML Tags are related


but distinct. An HTML element is the
complete structure, including the opening
tag, content (if any), and the closing tag (if
applicable).
HTML Element and HTML Tag

On the other hand, A tag is the actual


keyword or name enclosed in angle brackets
(< >) that tells the browser what kind of
content to expect.
SobrangLatina
HTML Page Structure
HTML Page Structure

The basic structure of an HTML page is shown


below. It contains the essential building-block
elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which
all web pages are created.
HTML Page Structure

• <!DOCTYPE html> – This is the document type


declaration, not a tag. It declares that the
document is an HTML5 document.
• <html> – This is called the HTML root element. All
other elements are contained within it.
• <head> – The head tag contains the “behind the
scenes” elements for a webpage. Elements within
the head aren’t visible on the front end of a
webpage.
HTML Page Structure

Typical elements inside the <head> include:

• <title>: Defines the title displayed on the browser


tab.
• <meta>: Provides information like the character
set or viewport settings.
• <link>: Links external stylesheets or resources.
• <style>: Embeds internal CSS styles.
• <script>: Embeds JavaScript for functionality.
HTML Page Structure

• <title> – The title is what is displayed on the top of


your browser when you visit a website and
contains the title of the webpage that you are
viewing.
• <h2> – The <h2> tag is a second-level heading tag.
• <p>– The <p> tag represents a paragraph of text.
• <body> – The body tag is used to enclose all the
visible content of a webpage. In other words, the
body content is what the browser will show on the
front end.
HTML Page Structure

An HTML document can be created using an HTML


text editor. Save the text file using the “.html” or
“.htm” extension. Once saved as an HTML document,
the file can be opened as a webpage in the browser.

Basic/built-in text editors are Notepad (Windows)


and TextEdit (MacOS). Other advanced text editors
include Sublime Text, Visual Studio Code, Froala, etc.
Web Browsers
Web Browsers

Unlike other programming languages, HTML does


not show output on the compiler. Web browsers
show the results of an HTML code.

It reads HTML files and determines how to show


content with the help of HTML tags. Any web browser
(Google, Safari, Mozilla Firefox, etc) can be used to
open a . HTML file and view the results.
HTML Editors
Step 1: Open Notepad (PC)

1. Windows 8 or later:

2. Open the Start Screen (the window symbol at the


bottom left on your screen). Type Notepad.

3. Windows 7 or earlier:

4. Open Start > Programs > Accessories > Notepad


Step 1: Open TextEdit (Mac)

1. Open Finder > Applications > TextEdit

2. Also change some preferences to get the application


to save files correctly. In Preferences > Format >
choose "Plain Text"

3. Then under "Open and Save", check the box that says
"Display HTML files as HTML code instead of formatted
text".

4. Then open a new document to place the code.


Step 2: Write Some HTML
Step 3: Save the HTML Page

1. Save the file on your computer. Select File > Save as in


the Notepad menu.

2. Name the file "index.htm" and set the encoding to


UTF-8 (which is the preferred encoding for HTML files).
Step 3: Save the HTML Page
Step 4: View the HTML Page in Your
Browser
1. Open the saved HTML file in your favorite browser
(double click on the file, or right-click - and choose
"Open with").

2. The result will look much like this:


Step 4: View the HTML Page in Your
Browser
Importance of HTML in Web
Development
Importance of HTML in Web
Development

• Basic building block - HTML is the basic


building block of creating any website.
HTML provides a standard structure to
create a website.

• Accessibility - Accessibility is an important


factor for any website. HTML makes web
pages accessible to all people equally.
Importance of HTML in Web
Development

• Compatibility - HTML is also compatible to


be used with other technologies like CSS,
Javascript, etc. to make web pages
interactive and dynamic.

• SEO Friendly - The use of proper tags and


attributes in HTML pages helps search
engines understand the content better.
Importance of HTML in Web
Development

• Responsive - HTML can adapt to different


platforms like Mobile, Tablets, etc., and fit
device sizes. A single webpage can be
viewed on multiple platforms using the
same code.

• Semantic - Semantic tags provide meaning


to the webpage sections and elements.
THANK YOU
FOR JOINING
TODAY'S CLASS.
Romel Griego
Instructor I
Department of Industrial and Information Technology
[email protected]

You might also like