eca 228 internet/intranet design i intro to markup

ECA 228 Internet/Intranet Design I

Intro to Markup


WYSIWYG

limitations– need to tweak code– complex sites require more skills

web pages are written with markup– display text– add graphics, sound, video


HTML Document

saved as text or ASCII final display is often browser dependent

– approximate browser marketshare IE 89% NN 8% Opera 2% Others 1%


Browser Dependency

browser is the software that interprets and displays html

at first there was no governing body to ensure standards

proprietary tags W3C, World Wide Web Consortium, now

maintains official HTML specifications


Markup

a webpage is made up of three different types of content:– text content– references: links, images, flash, etc– markup

Markup cont …

Three principle types of markup– elements: contained within < and >

non-empty elements This is a paragraph empty elements XHTML always requires a closing tag HTML closing tag is sometimes optional

– attributes: information about a specific element– values: each attribute has a value

Markup cont …

every element has only certain attributes that can be applied to it

XHTML: – all attributes must be in lower case– all values must be inside quotes

content


Block Level vs Inline

block level elements always display on a new line in the browser

a span of text, characters, or references within a block level element

block level elements can contain:– other block level elements– inline elements

inline elements cannot contain block level

Nesting

one element contained inside another parent element contains a child element

elements are closed in the opposite order they are opened

This text is bold.

<center>stuff </center>


White Space

all white space is compressed into one space you can use spaces, tabs, returns to make

your code easy to read


File Names

Rules– no spaces– assume file names are case sensitive– use a proper file extension

.htm .html

HTML vs XHTML

requires use of <html>, <head>, and <body> tagsets

all tags must be closed, including empty elements

use lowercase

values must be surrounded by quotes

all values must be stated explicitly eg, noshade=”noshade”


XHTML Advantages

consistent, well-structured code code is free of non-standard tags easier to update and edit easier to use with css easier to use with scripting easier to use with a database easier to adapt to other systems (hand held) transition from HTML to XML more likely to be cross-browser compatible easier to meet accessibility standards

HTML template

<html><!- - comments - -><head><title> My Title </title></head><body> . . . everything you see in the browser goes here</body></html>

paragraph tags

creates a new paragraph block level element attributes include

– align = left | right | center | justify ***deprecated

This is one paragraph.This is a second paragraph

<hn> </hn> header tags

creates a section header block level element browsers display as bold cannot include headers inside other headers

<hn> </hn> header tags cont …

n is a number from 1 to 6 - the lower the number, the larger the text( in general, 24, 18, 14, 12, 10, 8 pixels )

attributes include– align = left | right | center | justify ***deprecated

<hn> </hn> header tags cont …

<h1>This is an h1 header.</h1><h3>This is an h3 header.</h3>

display as

This is an h1 header.This is an h3 header.

line break

creates a manual line break within the text – does not add extra line as does

empty element, no closing tag attributes include

– clear = left | right | all ***deprecated– clear attribute indicates that any following text

should not begin until the specified margin is clear ( no image is between it and the margin )

<center> </center> center tag

centers virtually any element on a web page deprecated

displays as

<center>Welcome!</center>

Welcome!

bold tag

makes text bold

displays asThis text is bold.

This text is bold.

strong tag

generally makes text bold

displays asThis text is strong.

This text is strong.

italic tag

italicizes text

displays asThis text is italic.

This text is italic.

emphasis tag

generally italicizes text

displays asThis text is emphasized.

This text is emphasized.

underline tag

underlines text deprecated use with caution

displays as

This text is underlined.

This text is underlined.

<big> </big> big tag

makes text bigger than surrounding text generally makes the text one typical font size

larger than surrounding text cumulative, meaning if used more than once,

text is 2 font sizes bigger although this tag is not deprecated, style

sheets offer the developer much more control over text size

<big> </big> big tag cont …

displays as

This text is <big>bigger</big>.This text is <big><big>bigger<big></big> still.

This text is bigger.

This text is bigger still.

small tag

makes text smaller than surrounding text generally makes the text one typical font size

smaller than surrounding text cumulative, meaning if used more than once,

text is 2 font sizes smaller although this tag is not deprecated, style

sheets offer the developer much more control over text size

eca 228 internet/intranet design i intro to markup

Documents