ECA 228 Internet/Intranet Design I Intro to Markup.
-
Upload
stewart-boone -
Category
Documents
-
view
219 -
download
0
Transcript of ECA 228 Internet/Intranet Design I Intro to Markup.
![Page 1: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/1.jpg)
ECA 228 Internet/Intranet Design I
Intro to Markup
![Page 2: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/2.jpg)
ECA 228 Internet/Intranet Design I
WYSIWYG
limitations– need to tweak code– complex sites require more skills
web pages are written with markup– display text– add graphics, sound, video
![Page 3: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/3.jpg)
ECA 228 Internet/Intranet Design I
HTML Document
saved as text or ASCII final display is often browser dependent
– approximate browser marketshare IE 89% NN 8% Opera 2% Others 1%
![Page 4: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/4.jpg)
ECA 228 Internet/Intranet Design I
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
![Page 5: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/5.jpg)
ECA 228 Internet/Intranet Design I
Markup
a webpage is made up of three different types of content:– text content– references: links, images, flash, etc– markup
![Page 6: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/6.jpg)
ECA 228 Internet/Intranet Design I
Markup cont …
Three principle types of markup– elements: contained within < and >
non-empty elements <p>This is a paragraph</p> empty elements <br /> XHTML always requires a closing tag HTML closing tag is sometimes optional
– attributes: information about a specific element– values: each attribute has a value
![Page 7: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/7.jpg)
ECA 228 Internet/Intranet Design I
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
<p align=“center”>content</p>
![Page 8: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/8.jpg)
ECA 228 Internet/Intranet Design I
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
![Page 9: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/9.jpg)
ECA 228 Internet/Intranet Design I
Nesting
one element contained inside another parent element contains a child element
elements are closed in the opposite order they are opened
<p>This text is <b>bold</b>.</p>
<center><p><i>stuff </i></p></center>
![Page 10: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/10.jpg)
ECA 228 Internet/Intranet Design I
White Space
all white space is compressed into one space you can use spaces, tabs, returns to make
your code easy to read
![Page 11: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/11.jpg)
ECA 228 Internet/Intranet Design I
File Names
Rules– no spaces– assume file names are case sensitive– use a proper file extension
.htm .html
![Page 12: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/12.jpg)
ECA 228 Internet/Intranet Design I
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”
![Page 13: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/13.jpg)
ECA 228 Internet/Intranet Design I
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
![Page 14: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/14.jpg)
ECA 228 Internet/Intranet Design I
HTML template
<html><!- - comments - -><head><title> My Title </title></head><body> . . . everything you see in the browser goes here</body></html>
![Page 15: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/15.jpg)
ECA 228 Internet/Intranet Design I
<p> </p> paragraph tags
creates a new paragraph block level element attributes include
– align = left | right | center | justify ***deprecated
<p>This is one paragraph.</p><p>This is a second paragraph</p>
![Page 16: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/16.jpg)
ECA 228 Internet/Intranet Design I
<hn> </hn> header tags
creates a section header block level element browsers display as bold cannot include headers inside other headers
![Page 17: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/17.jpg)
ECA 228 Internet/Intranet Design I
<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
![Page 18: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/18.jpg)
ECA 228 Internet/Intranet Design I
<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.
![Page 19: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/19.jpg)
ECA 228 Internet/Intranet Design I
<br /> line break
creates a manual line break within the text – does not add extra line as <p> 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 )
![Page 20: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/20.jpg)
ECA 228 Internet/Intranet Design I
<center> </center> center tag
centers virtually any element on a web page deprecated
displays as
<center><p>Welcome!</p></center>
Welcome!
![Page 21: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/21.jpg)
ECA 228 Internet/Intranet Design I
<b> </b> bold tag
makes text bold
displays as<p>This text is <b>bold</b>.</p>
This text is bold.
![Page 22: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/22.jpg)
ECA 228 Internet/Intranet Design I
<strong> </strong> strong tag
generally makes text bold
displays as<p>This text is <strong>strong</strong>.</p>
This text is strong.
![Page 23: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/23.jpg)
ECA 228 Internet/Intranet Design I
<i> </i> italic tag
italicizes text
displays as<p>This text is <i>italic</i>.</p>
This text is italic.
![Page 24: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/24.jpg)
ECA 228 Internet/Intranet Design I
<em> </em> emphasis tag
generally italicizes text
displays as<p>This text is <em>emphasized</em>.</p>
This text is emphasized.
![Page 25: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/25.jpg)
ECA 228 Internet/Intranet Design I
<u> </u> underline tag
underlines text deprecated use with caution
displays as
<p>This text is <u>underlined</u>.</p>
This text is underlined.
![Page 26: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/26.jpg)
ECA 228 Internet/Intranet Design I
<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
![Page 27: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/27.jpg)
ECA 228 Internet/Intranet Design I
<big> </big> big tag cont …
displays as
<p>This text is <big>bigger</big>.</p><p>This text is <big><big>bigger<big></big> still.</p>
This text is bigger.
This text is bigger still.
![Page 28: ECA 228 Internet/Intranet Design I Intro to Markup.](https://reader030.fdocuments.us/reader030/viewer/2022032415/56649efe5503460f94c12d3f/html5/thumbnails/28.jpg)
ECA 228 Internet/Intranet Design I
<small> </small> 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