Scribd
Upload
5 views

Module 6 - HTML Introduction Part 1 (Week 7)

Uploaded by

fernandezaaronjustine
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Module 6 - HTML Introduction Part 1 (Week 7)

Uploaded by

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

HTML Introduction

Prepared by:
Learning Objective
At the end of this presentation, the students will be
able to:

1.Define what HTML is.

2.Will be able to know the Basics in HTML.Will be able to do


the following arithmetic operations on a binary:
This Chapters
Defines what HTML is.

Contains the different editors to use HTML.

Defines the different HTML basic elements, Tags, and


Formatting

3
What is HTML?
▸ HTML stands for Hyper Text Markup Language
▸ HTML is the standard markup language for creating Web
pages
▸ HTML describes the structure of a Web page
▸ HTML consists of a series of elements
▸ HTML elements tell the browser how to display the
content
▸ HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
4
https://www.w3schools.com/html/html_intro.asp
HTML Editor
There are different ways to edit an HTML file. Here are
some of the example:
 Notepad ++
 Notepad++ is a free, open-source HTML editor
developed for Windows-based computers. The
program is lightweight and comes with a
straightforward user interface. A mobile version is also
available for developers to code on the go.

5
https://www.hostinger.ph/tutorials/best-html-editors
HTML Editor
 Notepad++ is distributed as free software, and its
repository is available on GitHub. Although this HTML
editor is exclusive for Windows platforms, Linux users
can use this program via Wine to add a compatibility
layer.

 The flexible user interface of Notepad++ allows users


to choose between split or full-screen layouts when
coding. On a split-screen layout, you can work on two
different documents simultaneously.
6
https://www.hostinger.ph/tutorials/best-html-edito
HTML Editor
Here are the steps to use Notepad with HTML.
1. Open a new Notepad document.
2. Write some HTML in the document.
3. Select File in the Notepad menu and then Save as to
save the file.
4. Enter the name index.htm and select UTF-8 in the
Encoding drop-down menu.

7
https://www.thoughtco.com/find-notepad-on-you
HTML Editor
Here are the steps to use Notepad with HTML.
5. Use either .html or .htm for the extension. Don't save the file with
a .txt extension.
6. Open the file in a browser by double-clicking on the file. You can
also right-click and choose Open with to view your work.
7. To make additions or changes to the web page, return to the
saved Notepad file and make the changes. Resave and then view
your changes in a browser.

8
https://www.thoughtco.com/find-notepad-on-you
HTML Editor
Hare are some of other HTML editors that we can use.
o UltraEdit o BBEdit o Froala Editor

o NoteTab o Komodo IDE o Adobe Dreamweaver

o Notepad++ o Visual Studio Code o Pinegrow web editor

o Sublime Text o Atom o Brackets

o TextPad o Edit+

9
https://blog.hubspot.com/website/best-html-css-
HTML Elements
An HTML element is defined by a start tag, some content, and an end
tag.

Examples of some HTML elements:

10
https://www.w3schools.com/html/html_elements
Nested HTML Elements
HTML elements can be nested (this means that elements can contain
other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>,
<body>, <h1> and <p>):

11
https://www.w3schools.com/html/html_elements
Nested HTML Elements

12
https://www.w3schools.com/html/html_elements
Nested HTML Elements
Example Explained
 The <html> element is the root element and it defines the whole
HTML document.
 It has a start tag <html> and an end tag </html>.
 Then, inside the <html> element there is a <body> element:

13
https://www.w3schools.com/html/html_elements
Nested HTML Elements
Example Explained
 The <body> element defines the document's body.
 It has a start tag <body> and an end tag </body>.
 Then, inside the <body> element there are two other
elements: <h1> and <p>:

14
https://www.w3schools.com/html/html_elements
Nested HTML Elements
 The <h1> element defines a heading.
 It has a start tag <h1> and an end tag </h1>:

15
https://www.w3schools.com/html/html_elements
Nested HTML Elements
 The <p> element defines a paragraph.
 It has a start tag <p> and an end tag </p>:

16
https://www.w3schools.com/html/html_elements
Nested HTML Elements
Tag Description
 <!DOCTYPE> - Defines the document type
 <html> - Defines an HTML document
 <head> - Contains metadata/information for
the document
 <title> - Defines a title for the document
 <body> - Defines the document's body

17
https://www.w3schools.com/tags/ref_byfunc.asp
Nested HTML Elements
Tag Description
 <h1> to <h6> - Defines HTML headings
 <p> - Defines a paragraph
 <br> - Inserts a single-line break
 <hr> - Defines a thematic change in the
content
 <!--...--> - Defines a comment

18
https://www.w3schools.com/tags/ref_byfunc.asp
HTML Formatting
Formatting elements were designed to display special types
of text:
Tag Description
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text

19
https://www.w3schools.com/tags/ref_byfunc.asp
HTML Formatting
Tag Description
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

20
https://www.w3schools.com/tags/ref_byfunc.asp
HTML Formatting
Tag Description
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text 21
https://www.w3schools.com/tags/ref_byfunc.asp
Thank you!

22

You might also like