Scribd
Upload
9 views

Web Design P3

This document provides an overview of HTML (Hypertext Markup Language) for creating web pages and applications. It discusses the basic elements and structure of an HTML document including the <html>, <head>, and <body> tags. It also covers common text formatting tags such as <p>, <h1>-<h6>, <b>, <i>, and <u> as well as comments, attributes, and encoding text in different languages.

Uploaded by

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

Web Design P3

This document provides an overview of HTML (Hypertext Markup Language) for creating web pages and applications. It discusses the basic elements and structure of an HTML document including the <html>, <head>, and <body> tags. It also covers common text formatting tags such as <p>, <h1>-<h6>, <b>, <i>, and <u> as well as comments, attributes, and encoding text in different languages.

Uploaded by

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

Web programming

HTML
• HyperText Markup Language
• Basic language for creating documents on the web, and
for creating user interface for web applications
• It is a markup language (not programming language)
• HTML documents are in fact just a text files
• Creating and modifying can be done in any text editor
• File must follow certain version of HTML standard
• Currently actual version is HTML version 5
HTML
HTML
• Two basic elements – type declaration and HTML
element itself
• Type declaration gives information about the HTML
version
HTML
• HTML element (frame) inside document forms the
content, and it is consisted of header and body
HTML
• Tag <HTML> is a frame containing all other tags
• Every HTML document starts with <HTML> and ends
with </HTML>
• Tag <HEAD> is frame for holding information about the
document itself (title, description, key words) and where
script language code is written (JavaScript)
• Everything which we see in the browser window, the
page content, is defined inside <BODY> frame
HTML
HTML
• HTML document is consisted of elements (tags)
– Opening tag <ELEMENT_NAME>
– Closing tag </ELEMENT_NAME>
• Together with the HTML element name, tag can also
have certain number of attributes with values in ” ”
• Element tells the browser what to do, and the attribute
tells how to do it
• There is no difference between small and large letters,
but it is better to keep them small
• Browser depends on the information given in tags to
display the page
• HTML code is realized in the order in which it was written
HTML
• Each element is consisted of paired or unpaired tags
• Paired tags are marks which are used to set text or other
object into the HTML page
• Paired tags have opening and closing tag (introduced for
easier code reading)
• These marks must have symbol to start and symbol to
close tag
• <tag> and </tag>
• Complete text or set of tags inside those two marks is
translated just in context of this element
• Every tag has defined graphical appearance
HTML
• First HTML page
HTML
HTML
• Code can be written in any text editor
• Recommendation – Notepad++ (http://notepad-
plusplus.org/)
• After creating code, file type should be set to HTML
HTML
• Lets take a look at the code
• <!DOCTYPE html> declaration defines that this document is HTML5
• <html> - root element of the HTML page
• <head> holds meta information about the document
• <title> defines title of the document
• <body> visible content
HTML
• As we have already seen, HTML tags are surrounded by
<>
• Usually in pairs, for example <p> and </p>
• Content is written inside:

• For example:
HTML
• Some elements do not have content, and they are called
empty elements
• They don’t have end tag, for example line break
<br/>, or some other examples: <hr/>, <input/>, <img/>…
• Some elements can have nested other elements
HTML
• Comments exist in every programming language, and
they are used to help developers with descriptions and
notes
• They are part of the web page, but not interpreted,
therefore not shown to the user
• Their main role is to help navigating inside the document
• Comments are almost necessary when more than one
people are developing the site, or when PHP approach is
used
• Syntax
<! -- comment text -->
HTML
• Attributes are second building element of the HTML,
together with tags
• Attributes belong to a tag, and cannot be written
separately
• Attributes define with more details how to show tags in
browser, they are not mandatory but sometimes very
important
• Different tags have different allowed attributes
• Attribute names are predefined by HTML, together with
their values, type and interval, except for String
• They are written inside “ ”
• One tag can have more than one attribute
HTML
• Tag <hr/> is used to add one horizontal line (1 to 2 mm
height), with empty row before and after
• It is possible to set height by using attribute size=“n” (n is
number of pixels), width by attribute width=“n” and
alignment with attribute align (possible values LEFT,
RIGHT and CENTER)
• Line length is absolute length, or percentage of width of
whole screen
• Example:
<hr width=“100px”/>
<hr width=“75%”/>
<hr width=“25%”/>
HTML
<hr align="center" noshade size="5" width="150px" />
HTML

Working with text in HTML


HTML
• Default code set is English
• If it is needed to show other characters, outside English
letters, metatag can be used:
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

• It is defined in head tag, and allows browser to correctly


show special characters, for example Serbian Cyrillic
and Latin letters
HTML
HTML
• Text size can be defined with paired tags <h1> to <h6>
• Defining text size is much more precise with CSS, but
almost all web browsers are expecting H tags
• Their primary purpose is to highlight titles and headers
• There are tags H1, H2, H3, H4, H5 and H6
• Tag H1 gives the largest letters, H6 the smallest
• Every of those elements starts in new line, with some
spare room added by browser
• It is possible to add attribute align, to set horizontal
alignment of the displayed text (values LEFT, CENTER,
RIGHT)
HTML
HTML
• Paragraphs are defined with <p> tag, starting with the
new line
HTML
• Within the <p> tag, we can add attribute align, and
define horizontal alignment of the paragraphs, with
possible values LEFT, CENTER, RIGHT
HTML
• Entities are specially defined groups of characters, with
defined interpretation in browser
• They are used to show characteristic symbols
• Because they are not shown as regular text, they are
starting with & and ending with ;
HTML
• Text can be formatted as bold, italic or underline with
tags
– <b> text </b>
– <i> text </i>
– <u> text </u>
HTML
• Tag font can be used to format text
• <font color=“color”>
• <font size=“size”>
• <font face=“name”>
• Color can be English word for color or hexadecimal code
such as green, blue, #008000, #FFFF00
• Size can be number from -7 to 7
• Font name is some of defined fonts like Arial,
Helvetica…
HTML
• Additional tags for text formatting
• <cite></cite> Highlighted quotes
• <q></q> Quotations
• <sub></sub> index, subscript
• <sup></sup> exponent, superscript
• • <em></em> cursive
• • <strong></strong> black cursive around letters
• • <blockquote></blockquote> quotes
HTML
• Color is defined through attribute color, or bgcolor
• It can be defined as English word (blue, yellow…) or as a
hexadecimal number
• Hexadecimal number is much more precise
HTML
HTML

You might also like