1 / 51

Title Slide

CSS 404/504 Internet Concepts Building Web Pages #1 By Ralph Bisland. Title Slide. Must create a text file with commands to render the page. This file must be stored on the server computer so that other users will have access to it.

azura
Download Presentation

Title Slide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS 404/504 Internet Concepts Building Web Pages #1 By Ralph Bisland Title Slide

  2. Must create a text file with commands to render the page. This file must be stored on the server computer so that other users will have access to it. You must have the file and directory permissions set correctly. Can store the file on your PC to test it out, then the file must be uploaded to a server. Basics Of Building Web Pages

  3. Hypertext Markup Language Standards set by World Wide Web Commission (W3C) HTML Versions (1.0, 2.0, 3.0, 3.x, 4.x) Not all browsers render all commands Not all browsers render all commands the same way Netscape and I/E have some commands or options that are different HTML

  4. Using the UNIX system text editor (PICO) create the file on the server computer Using an HTML graphics based editor (I.e., Front Page), create the file on the client computer and upload it to the server computer Use some combination of the two above described approaches Use your PC text editor (i.e., Notepad) to create the file then upload it to the server Approaches To Creating HTML Files

  5. The commands to create your homepage should be stored in an ASCII text file called index.html. The file extension may br .shtml. Some browsers allow the commands to be placed in the file default.html. The file index.html must be placed in a subdirectory called public_htmlwhich must be a subdirectory one level below your home directory. HTML Files And Directories

  6. HTML commands consist of tags, parameters, and text All tags are enclosed in angle brackets (<tag>) Most tags have a beginning tag and an ending tag <tag> . . . </tag> HTML commands are free field HTML commands are case insensitive Basic HTML

  7. Parameters supply options to the tag. Parameter values are indicated by specifying the parameter name followed by an equal sign (=) followed by the parameter value. (No spaces in between the components.) Multiple parameters can be specified in any order. If the parameter value contains a blank character, it must be enclosed in quotes (single (‘) or double quotes(“)). Tag Parameters

  8. Examples: <FONT COLOR=red>ABC</FONT> <FONT COLOR=“lightblue”>ABC<FONT> Tag Parameters (ctd)

  9. Permissions on both your home and public_html directories must be: User: Read, write, and execute Group: Read and execute Other: Read and execute Permissions on the index.html file (and any other web page files) must be User: Read and write Group: Read Others: Read File And Directory Permissions

  10. Your URL will behttp://computer.name/~login-name http://orca.st.usm.edu/~bisland You must create your public_htmlsubdirectory (unless you use spinweb) If you do not use the file name index.htmlas your home page command file name you must specify the specific file name of your URL http://orca.st.usm.edu/~bisland/my-index.html Accessing Your Home Page

  11. Comments are used to annotate your HTML code. Comments are never rendered as part of your page. Syntax: <!-- Comment text -- > Example:<!-- Home page of Ralph Bisland --> Comments

  12. The entire HTML file must be enclosed in <HTML>tags Example:<HTML> Commands to define the page </HTML> HTML Tag

  13. A page consists of two parts Heading: Contains information about the page<HEAD> . . . </HEAD> Body: Contains commands to render the page<BODY> . . . </BODY> Makeup Of A Page

  14. Elementary Page Structure <HTML> <HEAD> Heading commands go here </HEAD> <BODY> Body commands go here </BODY> </HTML>

  15. Gives the window a name Title text is displayed at top of page Placed in the page heading section Every page should have a title Syntax: <TITLE> ... </TITLE> Examples:<TITLE> Ralph Bisland’s Home Page</TITLE> <TITLE> Ralph Bisland’s Home Page </TITLE> The Title Tag

  16. Optional tag Placed in page heading section Supplies information about the page Can have as many META tags as needed Some browsers do not recognize the META tag Syntax: <META values> No </META> tag Meta Tag

  17. Meta tag can have any of the following attributes HTTP_EQUIV:Value passed to browser NAME:Name of meta values CONTENT:Value associated with one of the HTTP-EQUIV or NAME attributes Meta Tag (ctd)

  18. Meta Tag Examples <meta name=“author” content=“Ralph Bisland”> <meta name=“keywords” content=“British Studies, Study Abroad Programs, European Studies”> <meta http-equiv=“charset” contents=“iso-8859-1”> <META http-equiv=“expires” contents=“Dec 31, 2005”>

  19. Sample Web Page <HTML> <HEAD> <TITLE> MY Home Page </TITLE> <META name=“author” content=“Ralph Bisland”> <META name=“keywords” content=“wonderful person, great golfer, Renaissance man, Expirt speler”> </HEAD> <BODY> Body commands go here </BODY> </HTML>

  20. Any text inserted in the body section is displayed by the browser Browser determines the display of the text and character set Multiple spaces and end of line characters are irrelevant Length of lines are dependent upon window size Browsers do word wrap Inserting Text In The Page Body

  21. Because of their meaning in HTML some characters are designated special Examples: <, >, & To render these characters, special symbols must be used Examples:&lt = < &gt = > &quot = “ Many others Special Characters

  22. Sample Page Body <BODY> This is a line of text &ltabc&gt This is another line </BODY> Rendering of the above commands This is a line of text <abc> This is another line

  23. Headings allow the user to place headings on sections of a page Heading size is specified numerically Sizes are 1-6; 1 is largest; 6 is smallest Syntax: <Hx>Text</Hx> {x: 1-6} Examples:<H1> This is big print </H1> <H3> This is normal print </H3> <H6> This is small print </H6> Headings

  24. You may do any/all of the following things with fonts. Change the default font Change font sizes Change the color of the font The presentation of fonts depends on the web browser and the computer Font Management

  25. Fonts my be modified with the FONT tag. Format: <FONT parameters>. . .</FONT> If the font is not recognized or not implemented, the default font is used. The default font on most browsers is Latin-1. The FONT Tag

  26. The font that is used to display text depends upon: The fonts defined in the browser The fonts defined in your computer You may change the default font temporarily (for a fixed amount of text) or for the entire page. Changing The Default Font

  27. To change fonts temporarily use the FACE clause of the font command. Format: <FONT FACE=new-font >Text</FONT> Example: <FONT FACE=courier> Ralph Bisland </FONT> Most systems will accept the fonts: Courier, Helvetica, and Times. Temporary Font Changes

  28. Bookman Arial Symbol or Symbol Wingdings or Wingdings Other Possible Fonts

  29. You may change the default font for the current page with the BASEFONT tag. The BASEFONT tag must be placed in the paged HEAD section. Format: <BASEFONT FACE=font-type > Example: <HEAD> <BASEFONT=HELVETICA> </HEAD> Permanent Font Changes

  30. The font size can be a number between 1 (Smallest) and 7 (Largest). The default font size is 3. The change can be permanent or temporary. The change can be relative (to the default size) or absolute. To change font sizes, use the SIZE clause of the FONT tag. Changing Font Sizes

  31. Format: <FONT SIZE=number>Text</FONT> <FONT SIZE=+/number>Text</FONT> Examples: <FONT SIZE=5> Ralph Bisland </FONT> <FONT SIZE=+2> Ralph Bisland </FONT> Changing Font Sizes (ctd)

  32. Use the BASEFONT tag. Place the tag in the HEAD section of the page. Example: <HEAD> <BASEFONT SIZE=5> </HEAD> Permanent Font Size Change

  33. Default font color is black To change the color of a set of text, user the “COLOR=“ clause of the FONT command Color change rendering depends on the browser and the monitor Many colors names are predefined Example:<FONT COLOR=“red”> Ralph Bisland </FONT> Color Fonts

  34. A more precise method of setting colors is to use the two digit hexadecimal value of the font color. Hex values 00 - FF (256 different levels of intensity) Colors are set using a mixture of three colors: Red, Green, and Blue. Three sets of two hexadecimal numbers are used to denote the intensity of the colors. #FF0000 = Red #00FF00 = Green #0000FF = Blue #FF00FF = Purple Setting The Exact Color Of Fonts

  35. Color Fonts (ctd) • To set font colors, use the FONT tag with • the associated hexadecimal values. • <FONT COLOR=“#FF0000”>Red Text</FONT> • <FONT COLOR=“#00FF00”>Green Text</FONT> • <FONT COLOR=“#0000FF”>Blue Text</FONT> • <FONT COLOR=“#FF00FF”>Purple Text</FONT>

  36. Reserved Word Colors aliceblue chartruse darkolivegreen antiquewhite chocolate darkorange aqua coral darkorchid aquamarine cornflowerblue darkred azure cornsilk darksalmon beige crimson darkseagreen bisque cyan darkslateblue black darkblue darkslategrey blanchedalmond darkcyan darkturquoise blue darkgoldenrod darkviolet blueviolet darkgrey deeppink brown darkgreen deepskyblue burleywood darkkhaki dimgrey cadetblue darkmagenta dodgerblue

  37. More Reserved Word Colors firebrick indigo lightskyblue floralwhite khaki lightslategrey floralgreen lavender lightsteelblue fuchsia lavenderblush lightyellow gainsboro lemonchiffon lime ghostwhite lightblue limegreen gold lightcoral linen goldenrod lightcyan magenta grey lightgoldenyellow maroon green lightgreen mediumaquamarine greenyellow lightgrey mediumblue honeydew lightpink mediumorchid hotpink lightsalmon mediumpurple indianred lightseagreen mediumseagreen

  38. More Reserved Word Colors mediumslateblue orchid saddleblue mediumspringgreen palegoldeenrod salmon mediumturquoise palegreen sandybrown mediumvioletred paleturquoise seagreen midnightblue palevioletred seashell mintcream papayawhip sienna mistyrose peachpuff silver navajowhite peru skyblue navy plum slateblue oldlace powderblue slategray olive purple snow olivedrab red springgreen orange rosybrown steelblue orangered royalblue tan

  39. More Reserved Word Colors teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen

  40. Combining Font Parameters • Font parameters can be combined • <FONT FACE=Courier • SIZE=+2 • COLOR=red> • Ralph Bisland • </FONT>

  41. Sample Web Page File <HTML> <<HEAD> <TITLE>Sample Web Page</> </HEAD><BODY> <H1>H1 Heading</H1> <H2>H2 Heading</H2> <FONT FACE=ARIAL COLOR=BLUE SIzE=+2> This is a line of text </FONT> </BODY> </HTML>

  42. You may force line breaks with the break command Syntax: <BR> Example:This is a line <BR> This is another line Rendering This is a line This is another line Line Breaks

  43. You may tell the browser that you do not want it to break a line a a certain spot with the no break command Syntax: <NOBR> Text </NOBR> Example:This is my E-mail Address: <NOBR>Ralph.Bisland@usm.edu</NOBR> No Breaks

  44. Text data can be organized into paragraphs Blank lines separate paragraphs Syntax: <P> . . . </P> Example: <P>This is a paragraph</P> <P>This is another</P> Paragraphs may be aligned centered with the ALIGN=CENTER clause Paragraphs

  45. Preformatted text forces the browser to render the text exactly as you enter it No other tags are allowed within preformatted text Syntax: <PRE> ... </PRE> Example:<PRE> This is a line Another line </PRE> Performatted Text

  46. Bold: <B> ... </B> Italics: <I> ... </I> Fixed Width Font: <TT> ... </TT> Blink: <BLINK> ... </BLINK> Centered: <CENTER> ... </CENTER> Combination: <B><BLINK><CENTER> Text </B></BLINK></CENTER> Text Formatting

  47. Text can be aligned to the right, left, or center using the DIV (division) tag Syntax: <DIV ALIGN=“dir”>...</DIV> Examples:<DIV ALIGN=“left”> Ralph </DIV> <DIV ALIGN=“right”> Ralph </DIV> <DIV ALIGN=“center”> Ralph </DIV> Text Alignment

  48. To render a subscript use the SUB tag. To render a superscript, use the SUP tag. Syntax: <SUB> ... </SUB> <SUP> ... </SUP> Examples: X<SUB>2</SUB> X<SUP>2</SUP> Subscripts and Superscripts

  49. Graphics oriented HTML Editor WYSIWYG editor (well kind of anyway) You enter the text into the edit window and format it however you wish Inserts the necessary tags to render the page the way you have it formatted on your screen The commands are then stored to a file located on your PC HTML Editors

  50. This file must be “published” (uploaded) to the server computer Files may be loaded directly uploaded to the server HTML Editors (ctd)

More Related