Appdev appdev appdev app devAPPDEV 1.2.pptx

UNDERSTANDING
HTML STRUCTURES
AND DIFFERENT IDEs

Objectives
2
▰ 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 website creation.

Content
HTML
Presentation
CSS
Structure
HTML
3
Behavior
Javascript
What makes up a webpage?

What makes up a webpage?
4
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

What is HTML?
5
 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

Tags in HTML
6
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.

Example of HTML tags
7
<b> HELLO <b>
content
start
tag
end
tag
tag
name
Element

Basic HTML document structure
8
<!DOCTYPE html>
<html>
<head>
*
*
</head>
<body>
*
*
</body>
</html>

!Doctype
9
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.

HTML element
10
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).

Title element
11
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)

Head element
12
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>
<noscript>

Body element
13
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.

Local Host Servers
14
• XAMPP
• LAMP
• LEMP
• MAMP
• WAMP
• AMPSS
• EasyPHP

Text Editors
17
• Aptana Studio 3 (Cross-Platform)
• Brackets 1.0(Cross-Platform)
• Notepad++(Windows)
• TextMate (Mac)

Common coding errors
25
• 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.

How to run a web page stored on your computer?
26
• Start your browser, and use the File Open 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.

DEMO
Let’s start creating our first web page :D
27

Appdev appdev appdev app devAPPDEV 1.2.pptx

Recommended

Recommended

More Related Content

Similar to Appdev appdev appdev app devAPPDEV 1.2.pptx

Similar to Appdev appdev appdev app devAPPDEV 1.2.pptx (20)

More from ArjayBalberan1

More from ArjayBalberan1 (20)

Recently uploaded

Recently uploaded (20)

Appdev appdev appdev app devAPPDEV 1.2.pptx