Scribd
Upload
0 views

WEBAPP Lesson 2

This document provides an overview of HTML structures, including its components such as content, structure, presentation, and behavior. It explains the purpose of HTML as a markup language for creating static web pages and details the basic structure of an HTML document along with common HTML tags. Additionally, it introduces various Integrated Development Environments (IDEs) for web development and highlights common coding errors and validation methods.

Uploaded by

Rovell Asidera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

WEBAPP Lesson 2

This document provides an overview of HTML structures, including its components such as content, structure, presentation, and behavior. It explains the purpose of HTML as a markup language for creating static web pages and details the basic structure of an HTML document along with common HTML tags. Additionally, it introduces various Integrated Development Environments (IDEs) for web development and highlights common coding errors and validation methods.

Uploaded by

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

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

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

You might also like