Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
|
Some More Essential HTML Tags
Here are a few more examples demonstrating useful HTML tags. Paste each example into a separate code file, save the files with a ".html" extension, and then open each file in your web browser to see how the tags affect layout and formatting. The following examples do not improve your ability to collect user data. They simply demonstrate adjustments to properties such as font size, item positioning, added graphics, links, etc.:
< h1> This is some header text< /h1> < h3> This header text is smaller< /h3> In HTML, all spaces, tabs, newlines and other white spacesare compressed (i.e., this text is all printed on the sameline, and wrapped to the length of the screen, and thesespaces are all compressed to one space. Ifyou want to explicitly display a certain number of spaces, use these characters: & nbsp; & nbsp; For newlines (carriagereturns), use the " br" tag: < br> < br> To adjust text size and color, use the " font" tag: < br> < br> < font size=1 color=blue> Little blue text< /font> < br> < font size=6 color=red> Big red text< /font> < br> < br> To display a link to a web site, use the " a" tag: < br> < br> < a href=" https://yahoo.com" > yahoo.com< /a> < br> < br> To display images, use the " img" tag: < br> < br> < img src=" https://laughton.com/basic/logo.png" > < br> < br> To make an image link to a URL, use " img" and " a": < br> < br> < a href=" https://laughton.com/basic/" target=_blank> click the image: < br> < img src=" https://laughton.com/basic/logo.png" > < /a> < br> < br> < strong> This text is bolded.< /strong> < br> < br> < pre> The " pre" tag displays preformatted text. Spaces, tabs, newlines, etc. are kept intact.< /pre> You can add a horizontal separator line with the " hr" tag: < br> < br> < hr width=80%> < br> Center anything on a page with the " center" tag: < br> < br> < center> Centered Text< /center> < br> Tables are used to display rows and columns of data. Theycan also be used to align portions of an HTML page in certainareas of the screen (i.e., to layout menu bar areas, headers, main content areas, and footers): < br> < br> < center> < table border=0 cellpadding=10 width=80%> < tr> < td width=33%> " tr" tags< /td> < td width=33%> are< /td> < td width=33%> rows< /td> < /tr> < tr> < td width=33%> " td" tags< /td> < td width=33%> are< /td> < td width=33%> columns< /td> < /tr> < tr> < td valign=top colspan=2 bgcolor=#CCCCCC> You can set " td" s to span as many columns as needed, using the " colspan" setting, and you can use the " valign" property to set where in the cell text is placed. " bgcolor" sets the cell's background color. < /td> < td width=20 bgcolor=#000000> < font color=white size=2> You can set size properties of all different parts of the table, using either percentage or pixel values. < /font> < /td> < /tr> < /table> < /center> Try resizing the page to see how centering, text wrapping andtable layouts work.The following two examples demonstrate how to use tables to layout items on a page:
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN" > < HTML> < HEAD> < TITLE> Generic HTML Page With Tables< /TITLE> < META http-equiv=Content-Type content=" text/html; charset=windows-1252" > < /HEAD> < BODY bgColor=#CCCCCC> < TABLE align=center background=" " border=0 cellPadding=20 cellSpacing=2 height=" 95%" width=" 85%" > < TR> < TD background=" " bgColor=white vAlign=top> Your page content goes here. < /TD> < /TR> < /TABLE> < TABLE align=center background=" " border=0 cellPadding=2 cellSpacing=2 width=" 85%" height=" 5%" > < TR> < TD background=" " cellPadding=2 bgColor=#000000 height=5> < P align=center> < FONT color=white size=1> Copyright © 2009 Yoursite.com. All rights reserved. < /FONT> < /P> < /TD> < /TR> < /TABLE> < /BODY> < /HTML> <! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN" > < HTML> < HEAD> < TITLE> Table Based Page Layout, No Menu< /TITLE> < META http-equiv=Content-Type content=" text/html; charset=windows-1252" > < META HTTP-EQUIV=" Page-Enter" CONTENT=" RevealTrans(Duration=2, Transition=14)" > < STYLE TYPE=" text/css" > a: hover { color: blue; text-decoration: underline; background: #F9EDED } < /STYLE> < /HEAD> < BODY bgColor=#000000> < TABLE align=center background=" " border=0 cellPadding=2 cellSpacing=2 height=" 100%" width=" 95%" > < TR> < TD background=" " bgColor=lightgrey vAlign=top> < TABLE background=" " border=0 cellPadding=2 cellSpacing=2 height=" 100%" width=" 100%" > < TR> < TD background=" " bgColor=black height=10> < P align=center> < a href="./index.html" > < IMG align=baseline alt=" HEADER IMAGE" border=0 hspace=0 src=" header.jpg" > < /a> < /P> < /TD> < /TR> < TR> < TD background=" " vAlign=top> < TABLE bgColor=#ffffff border=0 cellPadding=2 cellSpacing=2 height=" 100%" width=" 100%" > < TR> < TD bgColor=lightgrey height=20> < center> < /center> < /TD> < TD bgColor=lightgrey height=10 width=" 90%" > < center> < a href="./Home.html" > Home < /a>: Contact < /center> < /TD> < TD bgColor=lightgrey height=20> < center> < /center> < /td> < /TR> < TR> < TD background=" " colSpan=3 height=" 100%" > < TABLE border=0 cellPadding=15 cellSpacing=2 height=" 100%" width=" 100%" > < TR> < TD background=" " vAlign=top> YOUR PAGE CONTENT GOES HERE < /TD> < /TR> < /TABLE> < /TD> < /TR> < /TABLE> < /TD> < /TR> < TR> < TD background=" " bgColor=#000000 height=5> < P align=center> < FONT color=white size=1> Copyright © 2010 This Web Site. All rights reserved. < /FONT> < /P> < /TD> < /TR> < /TABLE> < /TD> < /TR> < /TABLE> < /BODY> < /HTML>Данная страница нарушает авторские права?