Basic HTML. Why study HTML? HyperText Markup Language (HTML) Setting up your website HTML XHTML. W3C HTML home page

Size: px

Start display at page:

Download "Basic HTML. Why study HTML? HyperText Markup Language (HTML) Setting up your website HTML XHTML. W3C HTML home page"

Felicia Cain
7 years ago
Views:

1 HyperText Markup Language (HTML) Basic HTML Specifications, guidelines, etc. Creating your website Access modes Creating HTML pages Coding HTML page with graphics HTML A markup language for publishing on the Web Having hyperlinks Specification maintained by the W3C W3C HTML home page Specifications Guidelines Activities Related work Study the textbook for more details on HTML. XHTML extensible Hypertext Markup Language XHTML is the successor to HTML A more strict version of HTML To allow delivery of web pages to devices (like mobile devices) that lack adequate resources as a computer Reference: Why study HTML? We have HTML composers, why study HTML? There are pretty good GUI for creating web pages. Setting up your website Depending on the configuration of the WWW server used Different WWW servers and versions 1

2 Features of a server are set by default or customized by the webmaster We shall follow the configuration of the current CS web server: Where to store HTML files Go to the root directory of your CS Unix account Make a subdirectory as below (mandatory name) ra:/home/shen> mkdir public_html Set its access mod as follows ra:/home/shen> chmod 705 public_html Make additional subdirectories under public_html as needed ra:/home/shen> cd public_html ra:/home/shen> mkdir cs312 ra:/home/shen> chmod 705 cs312 Directory Structure classes index.html shen public_html cs312 cgi-bin Normally, one can set directories with access mode 705 and files with 704 smallpage.html Access modes: directories: 705 or 701 readable files: 704 executable programs: 705 A very small HTML page A minimal HTML page File name: smallpage.html A very small page. Assume that the file smallpage.html is stored under /home/shen/public_html/cs312/htmldir/ and it has mode 704. The the URL to access it is: /htmldir/smallpage. html Open vs. closing tags Create a source HTML code only with a text editor, not a word processor. Note that public_html is not part of the URL. 2

3 The basic skeleton of an HTML page An HTML page should have a HEAD and a BODY /htmldir/skeletonpage.html <HEAD> <TITLE>Skeleton page</title> </HEAD> <BODY> <h1>another</h1> <h2> very small page</h2> <p>a paragraph.</p> <p> Another paragraph.</p> </BODY> Suggestions for a HTML page Start with giving a title, in the HEAD section <title>my HTML Document</title> Not displayed in browser, may appear at top of the window caption area Default name for bookmark or favorite Many other things for HEAD /htmldir/firsthtmlpage.html Work on the BODY section, to be displayed Headings <h1>my first page</h1> <h2>first section</h2> No indentation, not centered Relative in sizes /htmldir/firsthtmlpage.html Paragraphs <p>this is my first paragraph, any number of lines, smaller font size.</p> <p>following a blank line, this is my second paragraph, more lines.</p> Following a blank line Starting from left side </p> is optional /htmldir/firsthtmlpage.html New lines <br>start a new line, not a new paragraph, no closing tag. Breaking from previous text Start a new line without a blank line in front Fancier formatting Remember: Multiple spaces are displayed as one space, even in a pair of double quotes. Automatic text wrapping Text is generally displayed as long as possible with automatic wrapping To force a non-breaking phrase, use between the words of the phrase 3

4 Emphasizing Italicized: put in between the pair <em> and </em> Bold: use <strong> and </strong>, or <b> and </b> Centered, on a new line Use <center> and </center> to enclose anything to be centered Example simple textual page <center><h2>simple Textual Page</h2></center> <p>this is the <strong>first paragraph</strong>. <p>another <b>paragraph</b>, after a blank line. / htmldir/simpletext.html <br>starting a new line. This line can be arbitrarily lone, and will continue to be wrapped, until the starting of another new line. The term <b><em>internet Concepts </em></b> should never be displayed in <b>two separate lines</b>. <center>a centered new line, starts like a new paragraph.</center> Still another new line. See how spaces appear. / htmldir/simpletext.html Some special symbols Symbol & > < Numeric Coding & > < Symbolic Coding & > < /ht mldir/specialsymbols.html References: Authoring/HTML/Entitie s/common.html webdocs/htmldocs/ne whtml/iso_table.html Hyperlinks The syntax for a text hyperlink <a href = the target URL title= link title > phrase for the label </a> Example: <a href = uncements.html > CS312 Course Announcements </a> The text hyperlink can be used anywhere in a text Its appearance is typically as: CS312 Course Announcements When clicked on, the target page is retrieved and displayed Note: title= link title is optional. It shows up when cursor is placed on the hyperlink 4

5 Adding lists in a page Unordered (bulleted) list <h2>some wonderful persons:</h2> <ul> <li>john Smith</li> <li>mary Jones</li> <li>larry Benson</li> </ul> 312/htmldir/bullets.html Ordered (numbered) list <h2>three top students:</h2> <ol> <li>john Smith</li> <li>mary Jones</li> <li>larry Benson</li> </ol> cs312/htmldir/numbered.html Definition list <h2>three top young alumni of ODU:</h2> <dl> <dt>john Smith</dt> <dd>he recieved the 2004 Junior Nobel Prize in World Citizenship.</dd> A list with indented descriptions s312/htmldir/deflist.html <dt>mary Jones</dt> <dd>she had 4.0 GPA at graduation and was voted the most successful Student Association President.</dd> <dt>larry Benson</dt> <dd>he won an Olympics gold medal in swimming in 2004 and graduated with high honor in 2003.</dd> </dl> s312/htmldir/deflist.html Nesting of lists <h2>my favorite sports:</h2> <ol> <li>mountain climbing</li> <li>ball games <ul> <li>foot ball</li> <li>basket ball</li> </ul> </li> <li>jogging</li> </ol> 312/htmldir/nestedList.html Adding images A photo image in right size: <p><img src="../tpersonh.jpg" width="382" height="458" alt="a Tibetan person"> <p>same image in different size: <p><img src="../tpersonh.jpg" width="191" height="229" alt="a Tibetan person"> Partil/Relative Link: relative to current page cs312/htmldir/withimage.html 5

6 <p>same image in wrong proportion: <p><img src="../tpersonh.jpg" width="682" height="458" alt="a Tibetan person"> Positioning image around text An image placed together with a text is basically displayed in a continuous manner, often not neat. cs312/htmldir/withimage.html / htmldir/images.html An image can be aligned either to the left or to the right of a page margin. Texts will warp around them. to the left margin: <img src="../tpersonh.jpg" alt="a Tibetan"width="382" height="458" align="left"> to the right margin: <img src="../tpersonh.jpg" alt="a Tibetan" width="382" height="458" align="right"> How to start a paragraph after the previous left/right aligned picture image? Use <br clear="all"> to start the following text from a new line. 12/htmldir/ImageAlignLR.html 12/htmldir/ImageAlignClear.html An image can also be centered in a page. <center><img src="../tpersonh.jpg" alt="a Tibetan "width="382" height="458" ></center> /htmldir/imagecentered.html Using an image for hyperlink You most likely have clicked on a graphic image and then got a new web page Photo, icon, or any graphic image may be used as a hyperlink Just code it properly 6

7 Coding a image for hyperlink Recall the hyperlink syntax: <a href= " target URL" title="link title">link label</a> Just use an image file for the link label, e.g. <a href= " "> <img src="../tpersonh.jpg" alt="a Tibetan" width="382" height="458"> </a> 312/htmldir/ImageHyperlink.html 7

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements