UNDERSTANDI
NG HTML
STRUCTURES
AND
DIFFERENT
IDEs Web Applications
Objectives
▰At the end of the chapter,
students are expected to:
▻a. Understand the HTML
language and its structure.
▻b. Use HTML tags to write
HTML files and format HTML
files and understand the
components of web page.
▻c. Learn the different IDEs
that are commonly used for 2
website creation.
What makes up a webpage?
Content
HTML
Structure
HTML
Presentation
CSS
Behavior
3
Javascript
What makes up a webpage?
The makeup of a webpage could be viewed as a combination of the following four elements:
• Contents - the collective term for all the browser-displayable information elements such as text, audio, still
images, animation, video, multimedia, and files (e.g., Word, PowerPoint, PDF, etc.) of web pages. Content does
not require any additional presentational markups or styles in order to fully convey its message.
• Structure - refers to the practice of using HTML on content to convey meaning(semantics) and to describe how
blocks of information are structured to one another.
Examples: "this is a list" (ol, ul, li), "this is headings and subheadings" (<h1>, <h2>, ..., <h6>), "this
section is related to" (<a>), etc..
• Presentation - (or Style) refers to anything related to how the content and structure is presented. Examples: size,
color, margins, borders, layout, location, etc.
• Behavior - (or Interactivity) refers to the employment of client-side script (e.g., JavaScript) to create interactivity
between the webpage and its users
4
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is a language for creating web pages
HTML is not a programming language.
It is a markup language
A markup language is a set of markup tags
The markup tags describe how text should be
displayed
Purpose of HTML Language is to create static web
sites
5
Tags in HTML
Tags in HTML: Tags are one of the most important part in an HTML Document. HTML uses some
predefined tags which tells the browser about content display property, that is how to display a
particular given content. For Example, to create a paragraph, one must use the paragraph tags(<p>
</p>) and to insert an image one must use the img tags(<img />).
There are generally two types of tags in HTML:
Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
Singular Tags: These tags do not required to be closed.
6
Example of HTML tags
Element
tag
name
content
<b> AGUSTIN <b>
start end
tag tag
7
Basic HTML document structure
<!DOCTYPE html>
<html>
<head>
*
*
</head>
<body>
*
*
</body>
</html>
8
!Doctype
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what document type
to expect.
9
HTML element
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
10
Title element
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or
in the page's tab.
The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search
engine algorithms to decide the order when listing pages in search results.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
Here are some tips for creating good titles:
Go for a longer, descriptive title (avoid one- or two-word titles)
Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
Do not use just a list of words as the title (this may reduce the page's position in search results) 11
Head element
The <head> element is a container for metadata (data about data) and is placed between the <html>
tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta
information.
The following elements can go inside the <head> element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
12
<noscript>
Body element
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
13
Text Editors
• Aptana Studio 3 (Cross-Platform)
• Brackets 1.0(Cross-Platform)
• Notepad++(Windows)
• TextMate (Mac)
• Notepad
• Visual StudioCode
14
Aptana Studio 3
15
Aptana Studio 3
16
Aptana Studio 3
17
Notepad++
18
Netbeans (IDE)
19
Visual Studio Code (IDE)
20
Atom (IDE)
21
Common coding errors
• An opening tag without a closing tag.
• Misspelled tag or attribute names.
• Quotation marks that aren’t paired.
• Incorrect file references in link, img, or <a> elements.
22
How to run a web page stored on
your computer?
• Start your browser, and use the FileOpen or Open File command to open the file. Or, type the
complete path and filename into the address bar, and press Enter.
• Use the file explorer on your system to find the HTML file, and double-click on it.
• If you’re using Aptana, select the HTML file in the App Explorer and click the Run button to open
the file in the most recently used browser. If you’re using another text editor or IDE, look for a
similar button or command.
23
Validator
• How to use the W3C Markup Validation Service
• Go to the URL that follows, identify the file to be validated, and click the Check button:
• http://validator.w3.org/
24
Sample validator
25
