[PPT] - HTML 1 Markup Languages A Markup Language is a computer language PowerPoint Presentation

SLIDE 1

1

HTML

SLIDE 2

2

Markup Languages

A Markup Language is a computer language in which data and

instructions describing the structure and formatting of the data are embedded in the same file. The term derives from the way e.g. an editor or a printer would "mark up" a text, with annotations in the body and margins of the document.

It could be said that the mother of all markup languages was SGML:

Standard Generalized Markup Language. This was developed at IBM during the 1970s and 1980s, and eventually became an ISO

standard. Several types of markup used commonly derived from the

ideas in SGML, including HyperText Markup Language (HTML) and eXtensible Markup Language (XML). Some other types of markup languages developed independently, such as TeX and LaTeX.

SLIDE 3

3

Hypertext Markup Language

Hypertext Markup Language, better known as HTML, is the dominant format for the transfer
f information across the Internet. It was the coupling of the idea for a browser with HTML that

engendered the use of the term World Wide Web.

Hypertext is simply a text that contains links to other texts.
We deal with HTML in the form of documents/files that describe web pages. The file itself is just

a plain text file containing tags that indicate formatting or other kinds of objects (e.g. images, tables, links, etc.) to insert. These files are sent across Internet or stored locally.

When you open HTML document (either using some web address or just some file on your local

machine) with a web browser, it processes plain text the document contains and displays a nice formatted web page – so you can actually see all of the objects described by the plain file. Most of the browser allow user to see what “raw” HTML code which is currently displayed.

HTML is a declarative language which means that you define how the result should like, but

don’t define which steps should be performed to achieve this result. This puts some restrictions on how much the result may be customized. In modern browsers this problem may be overcome with built-in JavaScript engines allowing to do additional manipulation with HTML . This makes possible to create dynamic Rich Web Applications which currently dominate on web.

SLIDE 4

4

Hypertext Markup Language

Example:

<html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>This is another paragraph</p> </body> </html>

SLIDE 5

5

Hypertext Markup Language

HTML files follow just a few rules:

1. Every HTML command is enclosed in < and > characters: e.g. <p>
2. Basic HTML atoms are called "tags". Every opening tag must have a closing tag. Closing tags are

the same as opening tags, except that the name of the tag is preceded by a slash: e.g. <p> has closing tag </p>. Opening and closing tags together may be referred as an HTML element.

3. The opening and closing tags enclose text whose format or content they specify.
4. If a tag does not enclose text, it can end itself: put a slash before the > character: e.g. <br/>
5. Tags must be nested (placed inside each other) properly: e.g. <b><i>bold italic text<i><b> is

correct; <b><i>bold italic text<b><i> is not.

6. The behavior of HTML commands can be modified by inserting style specifications in the opening

tag: e.g. <p style="text-align:center"> A Centered Paragraph <p>

7. HTML tags should be in lower case

SLIDE 6

6

Hypertext Markup Language

Historically, HTML tags did not need to be closed, did not need to be nested

properly, and it was even considered good style to write them in upper case

letters. It is only with more recent updates to the language that these rules

have become important.

There are many tutorials available for HTML on the web - we list a few below.
There is a tutorial at W3schools. You can find many more just by doing a web

search for "HTML Tutorial".

W3schools also provides a complete HTML tags reference here.
There is no more authoritative source concerning HTML than the

World Wide Web Consortium, which is an organization that defines the single HTML standard used by everyone.

The latest version of HTML proposed by World Wide Web Consortium and

supported by the most popular browser is HTML 5.

SLIDE 7

7

Tags Nesting

<html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>This is another paragraph</p> </body> </html>

SLIDE 8

8

<html>, <head> and <body> tags

<html> is a root tag for any HTML document, which means all

contents of the document should be enclosed by this tag.

<html> can have two child tags: <head> and <body>.
<head> tag is mostly used to specify service information which is

invisible to user, e.g. document metadata such as content type, encoding, document keywords, etc. An exception is a page title which should be defined in this section. Page title is usually displayed by browsers in window/tab title. Tag name used to define page title is simply <title>.

<body> tag encloses the part of the document which is visible to

user, so all the contents and description of its layout should be placed inside this tag.

SLIDE 9

9

Heading Tags

Any document starts with a heading. You can use different sizes for your headings.

HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

Example:

<html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

SLIDE 10

10

Defining Structure: <div>, <p>, <table>, <ul>, <ol>, <dl>, <span> and <br/> tags

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-

elements to format them with CSS.

The <p> tag defines a paragraph. Browsers automatically add some space before and after each <p>

element.

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is

defined with the <th> tag. A table data/cell is defined with the <td> tag.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked

with bullets (small black circles) by default.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked

with numbers by default. You can override this behavior using type attribute with one of the following options: “1” (default), “A”, “a”, “I”, “i”.

HTML also supports description lists. A description list is a list of terms, with a description of each term. The

<dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

Also the <span> element is often used as a container for some text. When used together with CSS, the

<span> element can be used to style parts of the text. The key difference from all the above tags is that span doesn’t create a new line.

The <br/> tag inserts a single line break. The <br/> tag is an empty tag which means that it has no end tag.
<tr>, <th>, <td>, <dt>, <dd> and <li> tags are examples of the tags that can only make sense as child

elements of their specific parent tags and will have no effect outside these parent tags.

<table> and <ul>, <ol>, <dl> are examples of the tags that can only make sense if some child elements are

specified and shouldn’t contain any content on the top level.

SLIDE 11

11

Formatting Text

HTML defines special elements for defining text with a special meaning:

<b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text

SLIDE 12

12

Attributes

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and
ther tags. We used them so far in their simplest form, but most of the HTML tags can also have

attributes, which are extra bits of information.

An attribute is used to define the characteristics of an HTML element and is placed inside the

element's opening tag. All attributes are made up of two parts: a name and a value.

The name is the property you want to set. For example, the paragraph <p> element in the example

carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within quotations. The

below example shows three possible values of align attribute: left, center and right.

Example:

<html> <body> <p align="left">This is left aligned</p> <p align="center">This is center aligned</p> <p align="right">This is right aligned</p> </body> </html>

SLIDE 13

13

Core Attributes

Although each tag has its own set of attributes which make make different sense

in the context of this tag, some attributes are common to lots of elements.

The four core attributes that can be used on the majority of HTML elements

(although not all) are: id, title, class, style.

The id attribute of an HTML tag can be used to uniquely identify any element

within an HTML page.

The title attribute gives a suggested title for the element. The behavior of this

attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

The class attribute is used to associate an element with a style sheet, and

specifies the class of element. You will learn more about the use of the class attribute when you will learn CSS.

The style attribute allows you to specify CSS rules within the element.

SLIDE 14

14

Some Other Common Attributes

Name Possible Values Description

align right, left, center Horizontally aligns tags valign top, middle, bottom V ertically aligns tags within an HTML element. bgcolor numeric, hexidecimal, RGB values Places a background color behind an element background URL Places a background image behind an element width Numeric V alue height Numeric V alue title User Defined "Pop-up" title of the elements. Specifies the width of tables, images, or table cells. Specifies the height of tables, images, or table cells.

SLIDE 15

15

Links, Images and Embedded Objects

Links are found in nearly all web pages. Links allow users to click their

way from page to page. HTML links are hyperlinks and their existence actually makes HTML a hypertext markup language. You can click on a link and jump to another document. In HTML, links are defined with the <a> tag.The href attribute specifies the destination address of the

link. Text enclosed by the tag defines visible part of the link.
The <img> tag defines an image in an HTML page. The <img> tag has

two required attributes: src and alt. src specifies the URL of an image. alt specifies an alternate text for an image.

Sometimes you need to add music or video into your web page. The

easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. URL of the object to be embedded is also defined with src attribute.

SLIDE 16

16

Styles

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax: <tagname

style="property:value;">. For example <p style="color:red;">This is a paragraph.</p> will make text in the given paragraph red.

The property is a CSS property. The value is a CSS value. Once again, we’ll

discuss what does it mean later.

Here some other examples.
font-family defines the font to be used for an HTML element (e.g.

style="family:verdana;").

font-size defines the text size for an HTML element (e.g. style="font-

size:150%;").

text-align defines the horizontal text alignment for an HTML element (e.g.

style="text-align:center;").

SLIDE 17

17

Comments

A comment is a programmer-readable explanation or annotation in the

source code of a computer program. Such annotations doesn’t have any effect on program behavior and used solely to make code easier to understand.

HTML also supports comments. They are ignored by browsers while

rendering HTML page.

You can add comment to your HTML page using following syntax which is

slightly different from ordinary HTML tags: . So your comment should begin with a sequence of less than sign (<), exclamation mark and double dashes. To denote the end of your comment you should use double dash following be greater than sign (>).

Use comments to help yourself and people who may look in your HTML code

to explain what’s going on in your code, because sometimes it may be really hard.

SLIDE 18

18

Character Entities

Some characters are reserved in HTML. If you use the less than (<) or greater

than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML.

A character entity looks like this: &entity_name; or &#entity_number;, e.g. to

display a less than sign (<) one should use < or < to display a greater than sign (>) one should use > > (don’t forget about semicolon at the end!)

A common character entity used in HTML is the non-breaking space:   A

non-breaking space is a space that will not break into a new line. For example two words separated by a non-breaking space will stick together when browser window is resized and text is wrapped to fit into new window size.

Some other popular entities are: & or & for ampersand, " or

" for double quotation mark, ' or ' single quotation mark (apostrophe), – or – for long dash, &tab; or 	 for tabulation. Check out this W3C link for more.

SLIDE 19

19

Cascading Style Sheets (CSS)

Early web design suffered at least two acute problems: it was difficult to

assemble and maintain web sites with a unified theme; and the HTML code itself had so much formatting in it as to be unreadable, and to make it difficult for search engines and other programs to identify the content.

The W3C chose to address the problem, and that of structural markup

versus procedural markup in a more intelligent way. Cascading Style Sheets took much of the formatting out of the HTML itself and put it into a style sheet, which could be centralized for a given site, and referenced by all pages in that site for their appearance attributes.

The word "Cascading" refers to the way in which styles for individual

elements can supercede the specifications for their parents, and the way in which a style defined later can supercede one defined earlier.

SLIDE 20

20

CSS Basics

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
f a document written in a markup language. Although CSS code may be embedded directly in

HTML document (either by specifying style attribute of a particular element as we’ve seen earlier, or using <style> tag in the head section), the goal of separation of presentation and content achieved more efficiently by putting all CSS code into a separate file.

CSS style files are very simple to create and understand. They comprise only a list of

descriptive commands, always in the form “attribute: value;”.

These descriptions may be applied to HTML elements of specific types, e.g. to change the

format of an <h1> tag, to a collection of HTML elements grouped as a class, to elements

f a certain division of a document, or to elements only in certain situations. We'll

describe these individually.

To create a style file, all you need to do is open a new file in your favorite editor. You type

descriptive statements for the style of your document as discussed below, and save the file using a .css extension: e.g. mystyle.css. To get an HTML file to use your CSS file, you would insert a link tag into the header: e.g.

SLIDE 21

21

Applying Styles to HTML Elements

f Specific Type
We can change the appearance of any text associated with an any

HTML element of specific type such as a heading or paragraph simply by specifying a style for that element. For example, to change <h1> and <h2> so that such headings always appear centered and in a red text, we could use the following specification:

h1, h2 { color: red; text-align: center; }

The line breaks and spacing are only for readability. No spaces or

new lines are actually required. Note that you can set the format for multiple tags by listing them separated by commas. The actual style specification is always enclosed by braces

SLIDE 22

22

CSS Classes

Sometimes we want to apply a style to many disparate HTML elements, or to only HTML

elements in certain situations. One way to do this is to use classes to specify the format. For example, we could define a class to make a paragraph appear with a smaller font than normal, and to be indented using the following specification.

p.smallindent{ font-size: smaller; text-indent: 2em; }

Once that style is defined, we can apply it to any paragraph in our document by specifying

the paragraph tag as <p class='smallindent'>

Alternatively, if we wanted to apply the attributes to more than just paragraphs, we could

make the definition more generic:

.smallindent{ font-size: smaller; text-indent: 2em; }

In this case, any HTML tag can use the class attributes. For example, we could apply

them to a definition term using:

<dl> <dd>The Term</dd> <dt class='smallindent'>The definition</dt> </dl>

SLIDE 23

23

IDs

There is another way to restrict the effect of style specifications. This is through ID labels. ID

specifications work in practice similarly to classes. The only immediate differences are that ID labels use the pound sign (#) in place of the period used to denote a class. The chief difference in these approaches is that classes allow us to specify style attributes for actual HTML elements: headings, paragraphs, spans, and so on. By contrast, IDs pertain to containers, and the attributes we set for IDs will apply to HTML elements contained in the divisions, tables, sections and such identified by those IDs.

In particular, one can use <div> tags with ID labels to delineate a structural section of a document

with uniform presentation properties. For example, consider the following: #main p{ font-size: smaller; color: red; } #secondary { font-size: x-small; color: blue; }

The first ID specification causes any paragraph within a "main" division to be formatted in a smaller,

red font, while any element of any kind in a "secondary" division would be displayed in an extra small green font. In the document these might be used as <div id="main"> <p>This text is in the main part of the document</p> </div> <div id="secondary"> <p>This is in the secondary part of the document.</p> </div>

SLIDE 24

24

Pseudoclasses

Certain elements in HTML change their behavior based on the state of the
browser. The principal example of this is the anchor tag (<a>). Typically the

text associated with an anchor tag is blue until you click the link. Once the page the anchor tag points to has been visited, the link changes color, typically to purple. Thus, the anchor tag itself did not change, but its state within the browser session changed from normal to visited.

We can control the appearance of such stateful elements using CSS
pseudoclasses. Using these we can specify colors for anchor tags in their

unvisited, visited, or active states. The CSS specification below would color anchor tags blue normally, green after their href has been visited, and yellow when the mouse hovers over the link text.

:link{color:blue;} :visited{color:green;} :hover{color:yellow;}

SLIDE 25

25

CSS Properties

You’ve just seen some them, but there are

much more.

See the notes by Prof. Cooper for some of the

most widely used: http://www.math.wsu.edu/students/odykhovychn yi/M300/notes/stylecheat.html

You can also use this link as a complete

reference: https://www.w3schools.com/cssref/

SLIDE 26

26

Why “Cascading”?

CSS information can be provided from various sources. These sources can be the web

browser, the user and the author. The information from the author can be further classified into inline, media type, importance, selector specificity, rule order, inheritance and property

definition. CSS style information can be in a separate document or it can be embedded into an

HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

The style sheet with the highest priority controls the content display. Declarations not set in the

highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.

You can specify the highest priority for particular property by using !importnat annotation, e.g.

p { color: red !important; }

Inline definition using style attribute has higher priority than properties defined using classes or

IDs.

In most of the browsers user is capable of defining CSS style which will override the one

provided by a particular website. This may be used to improve accessibility.

SLIDE 27

27

Use <div> instead of <table>

Strive to avoid tables. You will fail, since tables are the only elements in HTML

that give full control of alignment. Furthermore, they processed more slowly than divisors and you need more tags achieve the same results than you will need while using divisors. The only case when table should be used is actually displaying tabular data.

Any page structure created with <table> could be easily achieved using <div>

and CSS display and float properties. e.g.

.div-table { display: table; width: auto; border: 1px solid black; } .div-table-row { display: table-row; } .div-table-col { float: left; display: table-column; border: 1px solid; }

Check out these links for more

https://www.w3schools.com/cssref/pr_class_display.asp https://www.w3schools.com/cssref/pr_class_float.asp options for display and float properties.

SLIDE 28

28

CSS Units

CSS has several different units for expressing a length. Many CSS properties

take "length" values, such as width, margin, padding, font-size, border- width, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc. A

whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

There are two types of length units: relative and absolute.
Relative length units specify a length relative to another length property. e.g.

em defines length relatively to the font-size of the element (2em means 2 times the size of the current font); using percent sign (%) you can define size relatively to the containing block.

The absolute length units are fixed and a length expressed in any of these will

appear as exactly that size. You can use such units as cm (centimeters), in (inches), px (pixels, 1px = 1/96th of 1in) or pt (points, 1pt = 1/72 of 1in)

SLIDE 29

29

Some Points of Style

Always strive to keep your pages independent of the platform/browser

used to view them. There are too many pages on the Web that look good in e.g. Internet Explorer, but do not work with other browsers.

Strive to comply with standards. There are too many pages on the

Web that use old or syntactically incorrect HTML.

Strive to avoid tables. You will fail, since tables are the only elements

in HTML that give full control of alignment. However, there are too many pages on the Web that use tables much more than is necessary, and this can lead to formatting problems when content changes.

Strive to keep procedural and structural markup separated. Use

Cascading Style Sheets as much as you can.

SLIDE 30

30

ICE #5

Create a web page which looks like this: