How To Use HTML? Table of Contents
How To Use HTML? How To Use HTML? Table of Contents What is HTML? HTML tag samples HTML basic elements Structural Definition Page Formatting Positioning Formatting Links, Graphics, and Sounds Dividers List Backgrounds and Colors Forms Table Frames Font types Scripts & JAVA Created 2007 Design by Nur How To Use HTML? What is HTML? HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. The definition of HTML is HyperText Markup Language. * HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in. * Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example). * HTML is a Language, as it has code-words and syntax like any other language How does HTML work? HTML consists of a series of short codes typed into a text-file by the website author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages. What are the tags? The tags are what separate normal text from HTML code. These are the words written between the <triangle-brackets>. They allow all the cool web stuff like , flash animations, images and tables, etc. just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: <b>These words will be bold</b>, and these will not. In this example above, the <b> tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through an ordinary web browser. There are quite a lot of tags in HTML, and these tags are constantly being jostled about when new versions are released. In this ebook you will see usage of some of the tags. Sample Tags: <font>...</font> Sets the font properties for the selected text. <em>...</em> Emphasises the surrounded text, changing it to italics. <small>...</small> Makes the enclosed text one size smaller. <strong>...</strong> or <b>…</b> Creates emphasis for the selected text, rendered in bold. Created 2007 Design by Nur How To Use HTML? HTML BASIC ELEMENTS Document Type <HTML></HTML> (beginning and end of file) Title <TITLE></TITLE> (must be in header) Header <HEAD></HEAD> (descriptive info, such as title) Body <BODY></BODY> (beginning of the page coding) STRUCTURAL DEFINITION Heading <H?></H?> Such as <h1></h1><h2></h2><h3></h3> Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?> Division <DIV></DIV> Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> Defined Content <SPAN></SPAN> Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually indented) Quote <Q></Q> (for short quotations) Citation <Q CITE="URL"></Q> Emphasis <EM></EM> (usually displayed as italic) Strong Emphasis <STRONG></STRONG> (usually displayed as bold) Citation <CITE></CITE> (usually italics) Code <CODE></CODE> (for source code listings) Sample Output <SAMP></SAMP> Keyboard Input <KBD></KBD> Variable <VAR></VAR> Definition <DFN></DFN> Author's Address <ADDRESS></ADDRESS> Large Font Size <BIG></BIG> Small Font Size <SMALL></SMALL> Time of Change <DEL DATETIME=":::"></DEL> Comments <DEL CITE="URL"></DEL> Acronym <ACRONYM></ACRONYM> Abbreviation <ABBR></ABBR> PRESENTATION FORMATTING Bold <B></B> Italic <I></I> Underline <U></U> (not widely implemented) Strikeout <STRIKE></STRIKE> (not widely implemented) Strikeout <S></S> (not widely implemented) Subscript <SUB></SUB> Font Color <FONT COLOR="#$$$$$$"></FONT> example: <FONT COLOR="#cccccc"></FONT> Select Font <FONT FACE="***"></FONT> <FONT WEIGHT=?></FONT> <MARQUEE></MARQUEE> Created 2007 Design by Nur How To Use HTML? POSITIONING For Alignment <SPACER ALIGN=LEFT|RIGHT|CENTER> Layer <LAYER></LAYER> Name <LAYER ID="***"></LAYER> Location <LAYER LEFT=? TOP=?></LAYER> Rel. Position <LAYER PAGEX=? PAGEY=?></LAYER> Source File <LAYER SRC="***"></LAYER> Stacking <LAYER Z-INDEX=?></LAYER> Stack Position <LAYER ABOVE="***" BELOW="***"></LAYER> Dimensions <LAYER HEIGHT=? WIDTH=?></LAYER> Clipping Path <LAYER CLIP=,,,></LAYER> Visible? <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER> Background <LAYER BACKGROUND="$$$$$$"></LAYER> Color <LAYER BGCOLOR="$$$$$$"></LAYER> Inline Layer <ILAYER></ILAYER> (takes same attributes as LAYER) Alt. Content <NOLAYER></NOLAYER> FORMATTING LINKS, GRAPHICS, AND SOUNDS Link Something <A HREF="URL"></A> Link to Location <A HREF="URL#***"></A> (if in another document) <A HREF="#***"></A> (if in current document) Target Window <A HREF="URL" TARGET="***"></A> Action on Click <A HREF="URL" ONCLICK="***"></A> (Javascript) Mouseover Action <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript) Mouse out Action <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript) Link to Email <A HREF="mailto:@"></A> Specify Subject <A HREF="mailto:@?SUBJECT=***"></A> (use a real question mark) Define Location <A NAME="***"></A> IMAGE Display Image <IMG SRC="URL"> Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> Alignment <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> Alternate <IMG SRC="URL" ALT="***"> (if image not displayed) Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels) <IMG SRC="URL" WIDTH=% HEIGHT=%> (as percentage of page width/height) Border <IMG SRC="URL" BORDER=?> (in pixels) Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels) Imagemap <IMG SRC="URL" ISMAP> (requires a script) Imagemap <IMG SRC="URL" USEMAP="URL"> SOUND Movie Clip <IMG DYNSRC="***" START="***" LOOP=?> Background Sound <BGSOUND SRC="***" LOOP=?|INFINITE> Client-Side Map <MAP NAME="***"></MAP> (describes the map) Map Section <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF> Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> Embed Object <EMBED SRC="URL"> (insert object into page) Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?> Object <OBJECT></OBJECT> 4.0Parameters <PARAM> Created 2007 Design by Nur How To Use HTML? DIVIDERS Paragraph <P></P> (closing tag often unnecessary) Align Text <P ALIGN=LEFT|CENTER|RIGHT></P> Justify Text <P ALIGN=JUSTIFY></P> Line Break <BR> (a single carriage return) Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL> Horizontal Rule <HR> Alignment <HR ALIGN=LEFT|RIGHT|CENTER> Thickness <HR SIZE=?> (in pixels) Width <HR WIDTH=?> (in pixels) Width Percent <HR WIDTH="%"> (as a percentage of page width) Solid Line <HR NOSHADE> (without the 3D cutout look) No Break <NOBR></NOBR> (prevents line breaks) LIST Unordered List <UL><LI></UL> (before each list item) Compact <UL COMPACT></UL> Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list) Bullet Type <LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent) Ordered List <OL><LI></OL> (before each list item) Compact <OL COMPACT></OL> Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list) Numbering Type <LI TYPE=A|a|I|i|1> (this & subsequent) Starting Number <OL START=?> (for the whole list) Starting Number <LI VALUE=?> (this & subsequent) Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition) Compact <DL COMPACT></DL> Menu List <MENU><LI></MENU> (before each list item) Compact <MENU COMPACT></MENU> Directory List <DIR><LI></DIR> (before each list item) Compact <DIR COMPACT></DIR> BACKGROUNDS AND COLORS Tiled Bkground Watermark Bkground Color Text Color Link Color Visited Link Active Link <BODY <BODY <BODY <BODY <BODY <BODY <BODY BACKGROUND="URL"> BGPROPERTIES="FIXED"> BGCOLOR="#$$$$$$"> TEXT="#$$$$$$"> LINK="#$$$$$$"> VLINK="#$$$$$$"> ALINK="#$$$$$$"> (order is red/green/blue) When adding color to your web site, it is possible to simply type in the name of the color; however, you should use a hexadecimal code. The reason for wanting to use them instead of the names is fairly simple: not all browsers and computer setups, even popular ones, will always recognize the color name in the same way that yours does. For example, it may display "lavender" as orange. However, hexadecimal codes are universal, always telling any computer the same thing. Hexadecimal codes -- otherwise known as "hex codes" -- are series of numbers and letters which indicate to the internet browser what colors should be displaying. The chart at the website shows a small sampling of hex codes (there are 16.7 million valid options). (More info at http://www.designbynur.com/eng/webcolors.htm ) Created 2007 Design by Nur How To Use HTML? SPECIAL CHARACTERS Special Character &#?; (where ? is the ISO 8859-1 code) < < > > & & " " Registered TM ® Registered TM ® Copyright © Copyright © Non-Breaking Space BACKGROUNDS AND COLORS Tiled Bkground Watermark Bkground Color Text Color Link Color Visited Link Active Link <BODY <BODY <BODY <BODY <BODY <BODY <BODY BACKGROUND="URL"> BGPROPERTIES="FIXED"> BGCOLOR="#$$$$$$"> TEXT="#$$$$$$"> LINK="#$$$$$$"> VLINK="#$$$$$$"> ALINK="#$$$$$$"> (order is red/green/blue) When adding color to your web site, it is possible to simply type in the name of the color; however, you should use a hexadecimal code. The reason for wanting to use them instead of the names is fairly simple: not all browsers and computer setups, even popular ones, will always recognize the color name in the same way that yours does. For example, it may display "lavender" as orange. However, hexadecimal codes are universal, always telling any computer the same thing. Hexadecimal codes -- otherwise known as "hex codes" -- are series of numbers and letters which indicate to the internet browser what colors should be displaying. The chart at the website shows a small sampling of hex codes (there are 16.7 million valid options). (More info at http://www.designbynur.com/eng/webcolors.htm ) Created 2007 Design by Nur How To Use HTML? FORMS Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM> File Upload <FORM ENCTYPE="multipart/form-data"></FORM> Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET"> Field Name <INPUT NAME="***"> Field Value <INPUT VALUE="***"> Checked? <INPUT CHECKED> (checkboxes and radio boxes) Field Size <INPUT SIZE=?> (in characters) Max Length <INPUT MAXLENGTH=?> (in characters) Button <BUTTON></BUTTON> Button Name <BUTTON NAME="***"></BUTTON> Button Type <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON> Default Value <BUTTON VALUE="***"></BUTTON> Label <LABEL></LABEL> Item Labelled <LABEL FOR="***"></LABEL> Selection List <SELECT></SELECT> Name of List <SELECT NAME="***"></SELECT> # of Options <SELECT SIZE=?></SELECT> Multiple Choice <SELECT MULTIPLE> (can select more than one) Option <OPTION> (items that can be selected) Default Option <OPTION SELECTED> Option Value <OPTION VALUE="***"> Option Group <OPTGROUP LABEL="***"></OPTGROUP> Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTAREA> Name of Box <TEXTAREA NAME="***"></TEXTAREA> Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA> Group elements <FIELDSET></FIELDSET> Legend <LEGEND></LEGEND> Alignment <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND> Created 2007 Design by Nur (caption for fieldsets) How To Use HTML? TABLE Define Table <TABLE></TABLE> Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER> Table Border <TABLE BORDER></TABLE> (either on or off) Table Border <TABLE BORDER=?></TABLE> (you can set the value) Cell Spacing <TABLE CELLSPACING=?> Cell Padding <TABLE CELLPADDING=?> Desired Width <TABLE WIDTH=?> (in pixels) Width Percent <TABLE WIDTH=%> (percentage of page) Table Color <TABLE BGCOLOR="$$$$$$"></TABLE> Table Frame <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE> Table Rules <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE> Border Color <TABLE BORDERCOLOR="$$$$$$"></TABLE> Dark Border <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> Light Border <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> Table Row <TR></TR> Alignment <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> Table Cell <TD></TD> (must appear within table rows) Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> No linebreaks <TD NOWRAP> Columns to Span <TD COLSPAN=?> Rows to Span <TD ROWSPAN=?> Desired Width <TD WIDTH=?> (in pixels) Width Percent <TD WIDTH="%"> (percentage of table) Cell Color <TD BGCOLOR="#$$$$$$"> Header Cell <TH></TH> (same as data, except bold centered) Alignment <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> No Linebreaks <TH NOWRAP> Columns to Span <TH COLSPAN=?> Rows to Span <TH ROWSPAN=?> Desired Width <TH WIDTH=?> (in pixels) Width Percent <TH WIDTH="%"> (percentage of table) Cell Color <TH BGCOLOR="#$$$$$$"> Table Body <TBODY> Table Footer <TFOOT></TFOOT> (must come before THEAD> Table Header <THEAD></THEAD> Table Caption <CAPTION></CAPTION> Alignment <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> Column <COL></COL> (groups column attributes) Columns Spanned <COL SPAN=?></COL> Column Width <COL WIDTH=?></COL> Width Percent <COL WIDTH="%"></COL> Group columns <COLGROUP></COLGROUP> (groups column structure) Columns Spanned <COLGROUP SPAN=?></COLGROUP> Group Width <COLGROUP WIDTH=?></COLGROUP> Width Percent <COLGROUP WIDTH="%"></COLGROUP> Created 2007 Design by Nur How To Use HTML? TABLE The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables. Sample Table: <html> <body> <h2>One column:</h2> <table border="1"> <tr> <td> My first table</td> </tr> </table> <p>One row and three columns:</p> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> 100 200 Created 2007 Design by Nur 300 How To Use HTML? FRAMES Frame Document <FRAMESET></FRAMESET> (instead of <BODY>) Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %) Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size) Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %) Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size) Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET> Border Width <FRAMESET BORDER=?></FRAMESET> Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> N3Frame Spacing <FRAMESET FRAMESPACING=?></FRAMESET> Define Frame <FRAME> (contents of an individual frame) Display Document <FRAME SRC="URL"> Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top> Margin Width <FRAME MARGINWIDTH=?> (left and right margins) Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins) Scrollbar? <FRAME SCROLLING="YES|NO|AUTO"> Not Resizable <FRAME NORESIZE> Borders <FRAME FRAMEBORDER="yes|no"> Border Color <FRAME BORDERCOLOR="#$$$$$$"> unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers) Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME) Dimensions <IFRAME WIDTH=? HEIGHT=?></IFRAME> Dimensions <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> Created 2007 Design by Nur How To Use HTML? FONT TYPES HTML supports a wide variety of fonts. Click to see common font types on the web. Each browser responds in its own way. Reasonable approach is to view anything you create with at least Microsoft Internet Explorer( MSIE) and Netscape. Mozilla and even Opera might show different results. Always be aware that what can be envisioned won't always work. With the small font sizes used in routine text for web pages, various font types may seem to be the same size. When using large font sizes, size differences become very obvious. Allow for that when laying out large text sizes for topic or page headings. Furthermore, note that a wide range of font sizes requires using CSS, Cascading Style Sheets. A main point here is to make web pages within the capabilities of one's target audience. Web browsers don't intrinsically handle a broad range of fonts. Desktop Windows-based machines will also use fonts stored by such word processors as WordPerfect & Word. The Windows XP web browser, handles more fonts by itself than the browser in earlier versions of Windows. Thus, font choices that look good on one computer can lose their impact when seen someplace else. Creating a *.pdf file is one solution. If one is using non-everyday fonts sparingly, one can create *.jpg or *.gif files using the desired fonts with a drawing program. An issue here is that they'll need to be redone if the background changes. This web site uses Verdana for explanatory comments unless stated otherwise. Helvetica and Arial are quite similar. Both MSIE an Netscape show them the same way, a minor error. Another font Georgia is used some places. Bolding is used above. Every font you see down here is graphic design, so it can be view all same every browser. Created 2007 Design by Nur How To Use HTML? TAGS <!--...--> Defines a comment <!DOCTYPE> Defines the document type <a> Defines an anchor <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines an address element <applet> Deprecated. Defines an applet <area> Defines an area inside an image map <b> Defines bold text <base> Defines a base URL for all the links in a page <basefont> Deprecated. Defines a base font <big> Defines big text <blockquote> Defines a long quotation <body> Defines the body element <br> Inserts a single line break <button> Defines a push button <caption> Defines a table caption <center> Deprecated. Defines centered text <code> Defines computer code text <col> Defines attributes for table columns <colgroup> Defines groups of table columns <dd> Defines a definition description <del> Defines deleted text <dir> Deprecated. Defines a directory list <div> Defines a section in a document <dt> Defines a definition term <em> Defines emphasized text <fieldset> Defines a fieldset <font> Deprecated. Defines text font, size, and color <form> Defines a form <frame> Defines a sub window (a frame) <frameset> Defines a set of frames <h1> to <h6> Defines header 1 to header 6 <head> Defines information about the document <hr> Defines a horizontal rule <html> Defines an html document <i> Defines italic text Created 2007 Design by Nur How To Use HTML? TAGS <iframe> Defines an inline sub window (frame) <img> Defines an image <input> Defines an input field <ins> Defines inserted text <isindex> Deprecated. Defines a single-line input field <kbd> Defines keyboard text <label> Defines a label for a form control <li> Defines a list item <link> Defines a resource reference <map> Defines an image map <menu> Deprecated. Defines a menu list <meta> Defines meta information <noframes> Defines a noframe section <noscript> Defines a noscript section <object> Defines an embedded object <ol> Defines an ordered list <option> Defines an option in a drop-down list <p> Defines a paragraph <param> Defines a parameter for an object <pre> Defines preformatted text <q> Defines a short quotation <s> Deprecated. Defines strikethrough text <script> Defines a script <small> Defines small text <span> Defines a section in a document <strike> Deprecated. Defines strikethrough text <strong> Defines strong text <style> Defines a style definition <table> Defines a table <tbody> Defines a table body <td> Defines a table cell <textarea> Defines a text area <tfoot> Defines a table footer <th> Defines a table header <thead> Defines a table header <title> Defines the document title <tr> Defines a table row <tt> Defines teletype text <u> Deprecated. Defines underlined text <ul> Defines an unordered list <var> Defines a variable Created 2007 Design by Nur How To Use HTML? SCRIPTS & JAVA Script <SCRIPT></SCRIPT> Location Type <SCRIPT SRC="URL"></SCRIPT> <SCRIPT TYPE="***"></SCRIPT> Language <SCRIPT LANGUAGE="***"></SCRIPT> Other Content <NOSCRIPT></NOSCRIPT> (if scripts not supported) Applet <APPLET></APPLET> File Name <APPLET CODE="***"> Parameters <APPLET PARAM NAME="***"> Location <APPLET CODEBASE="URL"> Identifier <APPLET NAME="***"> Alt Text <APPLET ALT="***"> (for non-Java browsers) Alignment <APPLET ALIGN="LEFT|RIGHT|CENTER"> Size <APPLET WIDTH=? HEIGHT=?> (for references) (in pixels) Spacing <APPLET HSPACE=? VSPACE=?> Server Script <SERVER></SERVER> Created 2007 Design by Nur (in pixels)
© Copyright 2024