Scribd
Upload
2 views

HTML

HTML (Hypertext Markup Language) is the standard language for creating and structuring web content, serving as the foundation for all websites. It is easy to learn, platform-independent, and works in conjunction with CSS and JavaScript for styling and interactivity. The document also discusses HTML elements, tags, editors, and the advantages and disadvantages of using HTML.

Uploaded by

Aegan Joshua Malapitan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML

HTML (Hypertext Markup Language) is the standard language for creating and structuring web content, serving as the foundation for all websites. It is easy to learn, platform-independent, and works in conjunction with CSS and JavaScript for styling and interactivity. The document also discusses HTML elements, tags, editors, and the advantages and disadvantages of using HTML.

Uploaded by

Aegan Joshua Malapitan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Click to edit Master title style

HTML
Introduction

1
HTML
Click to edit Master title style

• 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.
2 2
Basic
Click to HTML Code
edit Master title Example
style

<!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>

3 3
WhytoLearn
Click HTML?
edit Master title style

Here are 5 common reasons to learn HTML:


1.Build Websites: HTML is the basic building block for
creating any website. Learning HTML can help you
pursue a career in web development.
2.Customize Content: Allows you to edit or tweak web
pages, emails, or templates to fit your needs.
3.Understand how the web works: Helps you grasp how
the internet works and how web pages are structured.

4 4
WhytoLearn
Click HTML?
edit Master title style

4. 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.
5. Learn Easily: HTML is beginner-friendly, making it a great first
step into the world of coding and technology

5 5
Features
Click of HTML
to edit Master title style

1.It is easy to learn and easy to use.


2.It is platform-independent.
3.Images, videos, and audio can be added to a web
page.
4.Hypertext can be added to the text.
5.It is a markup language.

6
6
HTML
Click Element
to edit and
Master title styleHTML 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).
• 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.

7
7
Click to edit Master title style

AEGAN JOSHUA

8
8
HTML
Click Page
to edit Structure
Master title style

•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.

9
9
Click to edit Master title style

1010
Click to edit Master title style
• <!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.
Typical elements inside the <head> include:
1111
Click to edit Master title style

• <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.
1212
Click to edit Master title style

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.
Note: Basic/built-in text editors are
Notepad (Windows) and TextEdit (MacOS).
Other advanced text editors include
Sublime Text, Visual Studio Code, Froala,
etc.
1313
WebtoBrowsers
Click edit Master title style

• 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

1
14
HTML
Click History
to edit Master title style

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

1515
Click to edit Master title style

1616
Click to edit Master title style

Advantages of HTML Disadvantages of HTML


• HTML is used to build • HTML can only create static
websites. web pages. For dynamic web
• It is supported by all pages and logic, we
browsers. need JavaScript.
• It can be integrated with other • A large amount of code has to
languages be written to create a simple
like CSS, JavaScript, etc. web page.

1717
HTML
Click to Editors
edit Master title style

An HTML Editor is a software application


designed to help users create and modify
HTML code. It often includes features like
syntax highlighting, tag completion, and
error detection, which facilitate the coding
process.
1818
HTML
Click to Editors
edit Master title style

There are two main types of HTML editors:

1.Text-Based Editors – Allow direct coding with


features like syntax highlighting and code
completion for full control over the webpage
structure. Example – Sublime Text, Visual Studio
Code, etc.

1919
HTML
Click to Editors
edit Master title style

There are two main types of HTML editors:

2. WYSIWYG (What You See Is What You Get)


Editors – Offer a graphical interface to design web
pages visually, automatically generating the
corresponding HTML code. Example – Adobe
Dreamweaver, etc.

2020
HTML
Click to Editors
edit Master title style

HTML Editors List

There are various free and paid HTML editors


available in the market, but in this article,
we will be covering some renowned free HTML
editors that you can use as a beginner or switch to
if you are an experienced developer.

2121
HTML
Click to Editors
edit Master title style

1. Notepad
Notepad is a simple text editor that is also
used to write HTML code. It is an inbuilt
desktop application available in Windows OS.

2222
HTML
Click to Editors
edit Master title style

2. Brackets
Brackets is an open-source software primarily
used for Web development. It provides live
HTML, CSS, and JavaScript editing
functionality. Similar to the Notepad editor, create
a new file and save it with a .html extension to
run the HTML file.
2323
HTML
Click to Editors
edit Master title style

3. Sublime Text Editor


Sublime is a cross-platform code editor tool. It
supports all markup languages and is used as
an editor for HTML. Similar to the Notepad
editor, create a new file and save it with a .html
extension to run an HTML file.

2424
HTML
Click to Editors
edit Master title style

4. Atom
Atom is an open-source code editor tool for
MAC, Linux, and Windows. We can use Atom
to write and edit HTML code. Similar to the
Notepad editor, create a new file and save it
with a .html extension to run an HTML file.

2525
HTML
Click to Editors
edit Master title style

5. Visual Studio Code


It is one of the most popular code editors of
today’s generation. Many companies and
software developers prefer this online HTML
code editor.

2626
Reasons
Click to editto Usetitle
Master an style
HTML Editor

Editors for HTML offer several advantages to


writing and editing HTML codes. Some benefits of
using HTML editors are:

2727
Click to edit Master title style

1.Syntax Highlighting: HTML editors use color-coding


to distinguish tags, attributes, and content, making
code more readable.
2.Autocompletion: These editors suggest tags and
correct common errors, improving coding speed.
3.Code Validation: Built-in validators check for syntax
issues and missing tags.
2828
Click to edit Master title style

4.Debugging Tools: Some editors offer


debugging features to identify and fix errors.
5.Customization Options: Customize the
interface and settings to enhance your coding
experience.

2929
How to
Click toedit
Choose the
Master Right
title styleHTML Editor?

When selecting an HTML editor, consider the following


factors:

1.Skill level: Beginners might prefer WYSIWYG editors for


ease of use, whereas advanced users may opt for text-
based editors for better control.
2.Project needs: Larger projects might benefit from a more
robust editor with extensive features and integrations.
3.Compatibility: Ensure the editor supports other
technologies you plan to use like CSS, JavaScript, or 3030
HTMLtoBasics
Click edit Master title style

Hello

3131
Click toHeadings
HTML edit Master title style

The HTML heading tags are used to create


headings for the content of a webpage. These
tags are typically placed inside the body tag.
HTML offers six heading tags, from <h1> to
<h6>, each displaying the heading in a different
font size.

3232
Click to edit Master title style
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>HTML heading tag</title>
</head>

<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>

</html>

3333
Click to
HTML Paragraph
edit Master
andtitle
Breakstyle
Elements

HTML <p> tags are used to write paragraph


statements on a webpage. They start with the
<p> tag and end with </p>.

The HTML <br> tag is used to insert a single line


break and does not require a closing tag. In
HTML, the break tag is written as <br>.

3434
Click to edit Master title style
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Example of paragraph and break elements
</title>
</head>

<body>
<p>
HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup
language.<br>HTML is a combination of Hypertext
and Markup language.<br>Hypertext defines the
link between web pages.<br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>

</html>
3535
Click to edit Master title style

<!DOCTYPE html>
<html lang="en">

<head>
<title>The p tag</title>
</head>

<body>
<p> I am a programmer, i have no life</p>
<p>It contains well written, well thought articles.</p>
</body>

</html>

3636
HTML
Click to Tables
edit Master title style

HTML Tables allow you to arrange data into rows


and columns on a web page, making it easy to
display information like schedules, statistics, or other
structured data in a clear format.

3737
Click toisedit
What an HTML
MasterTable?
title style

An HTML table is created using the <table>


tag. Inside this tag, you use
•<tr> to define table rows,
•<th> for table headers, and
•<td> for table data cells

3838
Click to edit Master title style

Each <tr> represents a row, and within each


row, <th> or <td> tags represent the cells in
that row, which can contain text, images,
lists, or even another table.

3939
Click to edit Master title style
<!DOCTYPE html> <tr>
<html> <td>Arun</td>
<td>Singh</td>
<body> <td>32</td>
<table> </tr>
<tr> <tr>
<th>Firstname</th> <td>Sam</td>
<th>Lastname</th> <td>Watson</td>
<th>Age</th> <td>41</td>
</tr> </tr>
<tr> </table>
<td>Priya</td> </body>
<td>Sharma</td>
<td>24</td> </html>
</tr>
4040
Click to edit Master title style

• <table>: This tag starts the table. Everything between


the opening <table> and closing </table> tags makes
up the table.
• <tr>: Stands for “table row”. Each <tr> tag defines a
row in the table.
• <th>: Stands for “table header”. It’s used for the
headers of the columns. In this case, “Firstname“,
“Lastname“, and “Age” are headers. Text in <th> tags is
usually bold and centered by default.
4141
Click to edit Master title style

• <td>: Stands for “table data”. This tag is used for


actual data cells under each column. For instance,
“Priya” is the data under the “Firstname” header,
“Sharma” under the “Lastname“, and “24” under the
“Age“.
• The first <tr> has three <th> elements, setting up the
column titles.
• The subsequent <tr> tags each contain three <td>
elements, representing the data for each person listed
in the table.
4242
HTML
Click to Lists
edit Master title style

An HTML List allows you to organize data on web


pages into an ordered or unordered format to
make the information easier to read and visually
appealing. HTML Lists are very helpful for creating
structured, accessible content in web
development.

4343
Typestoof
Click HTML
edit Lists
Master title style
There are three main types of lists in HTML:

• Unordered Lists (<ul>): These lists are used for


items that do not need to be in any specific order.
The list items are typically marked with bullets.
• Ordered Lists (<ol>): These lists are used when the
order of the items is important. Each item in an
ordered list is typically marked with numbers or
letters.
• Description Lists (<dl>): These lists are used to
contain terms and their corresponding descriptions.
4444
Click to edit Master title style

1. Using HTML Unordered List or Bulleted


List
Unordered lists are ideal for scenarios
where the sequence of the items is not
important.
The unordered list items are marked with
bullets, also known as bulleted lists. An
unordered list starts with the <ul> tag, and
each list item begins with the <li> tag. 4545
Click to edit Master title style

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

4646
Click to edit Master title style

<!DOCTYPE html>
<html>

<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>

</html>

4747
Click to edit Master title style

2. Using HTML Ordered List


Ordered lists are used when the items need to
follow a specific sequence.
In an ordered list, all list items are marked with
numbers by default. An ordered list starts with the
<ol> tag, and each list item begins with the <li> tag.

4848
Click to edit Master title style

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

4949
Click to edit Master title style
<!DOCTYPE html>
<html>

<head>
<title>HTML ol tag</title>
</head>

<ol >
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

</body>

</html>
5050

You might also like