Scribd
Upload
41 views

2 HTML Elements and Tags

1. Open a plain text editor like Notepad or TextEdit. 2. Write HTML tags and elements between <html> and </html> tags to structure the content. 3. Add headings, paragraphs, images and links using tags like <h1>, <p>, <img>, and <a>. 4. Save the file with a .html extension. 5. Open the HTML file in a web browser to view it.

Uploaded by

kanna
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

2 HTML Elements and Tags

1. Open a plain text editor like Notepad or TextEdit. 2. Write HTML tags and elements between <html> and </html> tags to structure the content. 3. Add headings, paragraphs, images and links using tags like <h1>, <p>, <img>, and <a>. 4. Save the file with a .html extension. 5. Open the HTML file in a web browser to view it.

Uploaded by

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

HTML

ELEMENTS
AND TAGS
Requirement in creating Webpage with HTML:

PLAIN TEXT EDITOR BROWSER YOUR CREATIVE


THINKING
Code Editors

•Are programs which are essential for


creating and building your websites using
HTML Language.
L I S T O F P O P U L A R A N D
C O M PAT I B L E C O D E
E D I T O R S W I T H
D I F F E R E N T O P E R AT I N G
S Y S T E M .
Notepad++

• It is a text and source code editor for


use with Microsoft Windows. It
supports tabbed editing, which
allows working with multiple open
files in a single window. (Wikipedia)
• It is not available on the OSX or other
Apple operating systems.
• It is not a compiler. This means that,
while you can use the application to
write code, you cannot use it to test
the code.
• Developer(s): Don Ho
2. Brackets
• is a source code editor with a
primary focus on web
development. Created by Adobe
Systems, it is free and open-source
software licensed under the MIT
License,
• is currently maintained on GitHub
by Adobe and other open-source
developers.
• It is written in JavaScript, HTML
and CSS. (Wikipedia)
3. Sublime Text
• It is a shareware cross-platform
source code editor with a Python
application programming interface.
• It natively supports many
programming languages and markup
languages,
• functions can be added by users with
plugins, typically community-built
and maintained under free-software
licenses. (Wikipedia)
• Original author(s): Jon Skinner
4. Atoms
• Atom is a free and open-source
text and source code editor for
macOS, Linux, and Microsoft
Windows with support for plug-ins
written in Node.js, and embedded
Git Control, developed by GitHub.
• Atom is a desktop application built
using web technologies.
(Wikipedia)
• Developed by: GitHub (subsidiary
of Microsoft)
5. Adobe Dreamweaver
CC
• Adobe Dreamweaver is a
proprietary web development tool
from Adobe Inc.
• It was created by Macromedia in
1997 and developed by them until
Macromedia was acquired by
Adobe Systems in 2005.
• Adobe Dreamweaver is available
for the macOS and Windows
operating systems. (Wikipedia)
6. CodePen
• It is an online community for
testing and showcasing user-
created HTML, CSS and
JavaScript code snippets.
• It functions as an online code
editor and open-source
learning environment, where
developers can create code
snippets, called "pens," and
test them. (Wikipedia)
• Created by: Chris Coyier
THE
BASIC
SYNTAX
OF
HTML
<! DOCTYPE html>
HTML Documents <html>
<body>

<!DOCTYPE html> <h1>My First Heading</h1>


<p>My First Paragraph</p>

<html> </html> </body>


</html>
<body> </body>
The <!DOCTYPE> Declaration

• The <!DOCTYPE> declaration represents the document type and helps


browsers to display web pages correctly.
• It must only appear once, at the top of the page (before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:

<! DOCTYPE html>


HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading:

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs:
•HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML IMAGES
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are
provided as attributes:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">


HTML Links:
•HTML links are defined with the <a> tag:

<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.


Attributes are used to provide additional information about HTML elements.
HTML ELEMENTS
AN HTML ELEMENT IS DEFINED BY A START TAG,
SOME CONTENT AND AN END TAG
Element

<p> class=" important ">This is a paragraph</p>

Start tag
Value Content End tag
Attribute
HTML ELEMENT
• is defined by a start tag, some content and end tag:
<tagname>Content goes here…</tagname>

• The HTML element is everything from the start tag to the end tag:
• <h1>My First Heading</h1>
• <p>My First Paragraph</p>
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). This
elements are called empty elements. Empty elements do not have an end
tag.
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>):
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
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:

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
• 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 is two other elements: <h1>
and <p>:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
• The <h1> element defines a heading.
• It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>


• The <p> element defines a paragraph.
• It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>


Never Skip the End Tag
• Some HTML elements will display correctly, even if you forget the
end tag:
Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Empty HTML Elements
• HTML elements with no content are called empty elements.
• The <br> tag defines a line break, and is an empty element without
a closing tag:

Example
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive

•HTML tags are not case


sensitive: <P> means the same
as <p>.
HTML Tag Reference
Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings


Follow the steps below to create your first web
page with Notepad or TextEdit.
1.Step 1: Open Notepad (PC) Windows 10 or later: ...
2.Step 1: Open TextEdit (Mac) Open Finder > Applications >
TextEdit. ...
3.Step 2: Write Some HTML. ...
4.Step 3: Save the HTML Page. ...
5.Step 4: View the HTML Page in Your Browser.

https://www.youtube.com/watch?v=hM0VQKLNgkQ
OUTPUT
ACTIVITY
• For those who have laptop or Desktop:
1.Choose your favorite song.
2.Encode the lyrics in your notepad.
3.Add image of the artist or the album
4.Use the different tags and attributes that were discussed.
5.Submit the screenshot of your syntax and web output in our MS Teams.

• For those who are using Cellphone


1.Type your lyrics in Docs, includes Tags and Attributes that were discussed.
2.Download the image of the artist
3.Submit the soft copy of both file in our MS Teams.

You might also like