Web Design



HTML Guide BookWeb DesignMohamed NuzrathContent source TOC \o "1-3" \h \z \u What is HTML? PAGEREF _Toc514707720 \h 6A Simple HTML Document PAGEREF _Toc514707721 \h 6Example Explained PAGEREF _Toc514707722 \h 7HTML Tags PAGEREF _Toc514707723 \h 7Web Browsers PAGEREF _Toc514707724 \h 7HTML Versions PAGEREF _Toc514707725 \h 8HTML?Elements PAGEREF _Toc514707726 \h 8HTML?Attributes PAGEREF _Toc514707727 \h 9The href Attribute PAGEREF _Toc514707728 \h 9Example PAGEREF _Toc514707729 \h 9The src Attribute PAGEREF _Toc514707730 \h 10Example PAGEREF _Toc514707731 \h 10The width and height Attributes PAGEREF _Toc514707732 \h 10Example PAGEREF _Toc514707733 \h 10The alt Attribute PAGEREF _Toc514707734 \h 10Example PAGEREF _Toc514707735 \h 10The style Attribute PAGEREF _Toc514707736 \h 10Example PAGEREF _Toc514707737 \h 10The title Attribute PAGEREF _Toc514707738 \h 11Example PAGEREF _Toc514707739 \h 11Use Lowercase Attributes PAGEREF _Toc514707740 \h 11Quote Attribute Values PAGEREF _Toc514707741 \h 11Bad PAGEREF _Toc514707742 \h 11Good PAGEREF _Toc514707743 \h 11Single or Double Quotes? PAGEREF _Toc514707744 \h 11Chapter Summary PAGEREF _Toc514707745 \h 12HTML?Headings PAGEREF _Toc514707746 \h 13Heading 1 PAGEREF _Toc514707747 \h 13Heading 2 PAGEREF _Toc514707748 \h 13Heading 3 PAGEREF _Toc514707749 \h 13Headings Are Important PAGEREF _Toc514707750 \h 13HTML Horizontal Rules PAGEREF _Toc514707751 \h 13HTML Paragraphs PAGEREF _Toc514707752 \h 13Example PAGEREF _Toc514707753 \h 14HTML?Styles PAGEREF _Toc514707754 \h 14The HTML Style Attribute PAGEREF _Toc514707755 \h 14HTML Background Color PAGEREF _Toc514707756 \h 14Example PAGEREF _Toc514707757 \h 14HTML Text Color PAGEREF _Toc514707758 \h 14Example PAGEREF _Toc514707759 \h 14HTML Fonts PAGEREF _Toc514707760 \h 15Example PAGEREF _Toc514707761 \h 15HTML Text Size PAGEREF _Toc514707762 \h 15Example PAGEREF _Toc514707763 \h 15HTML Text Alignment PAGEREF _Toc514707764 \h 15Example PAGEREF _Toc514707765 \h 15HTML Formatting Elements PAGEREF _Toc514707766 \h 15HTML Comment Tags PAGEREF _Toc514707767 \h 16HTML?Colors PAGEREF _Toc514707768 \h 16Background Color PAGEREF _Toc514707769 \h 16Example PAGEREF _Toc514707770 \h 16Text Color PAGEREF _Toc514707771 \h 16Example PAGEREF _Toc514707772 \h 17HTML Links - Hyperlinks PAGEREF _Toc514707773 \h 17Syntax PAGEREF _Toc514707774 \h 17Example PAGEREF _Toc514707775 \h 17Local Links PAGEREF _Toc514707776 \h 17Example PAGEREF _Toc514707777 \h 18HTML Links - The target Attribute PAGEREF _Toc514707778 \h 18Example PAGEREF _Toc514707779 \h 18HTML Links - Image as Link PAGEREF _Toc514707780 \h 18Example PAGEREF _Toc514707781 \h 18Link Titles PAGEREF _Toc514707782 \h 18Example PAGEREF _Toc514707783 \h 19Create a Bookmark PAGEREF _Toc514707784 \h 19Example PAGEREF _Toc514707785 \h 19HTML?Images PAGEREF _Toc514707786 \h 19Example PAGEREF _Toc514707787 \h 20HTML Images Syntax PAGEREF _Toc514707788 \h 20The alt Attribute PAGEREF _Toc514707789 \h 20mage Size - Width and Height PAGEREF _Toc514707790 \h 20Example PAGEREF _Toc514707791 \h 20HTML?Tables PAGEREF _Toc514707792 \h 20Defining an HTML Table PAGEREF _Toc514707793 \h 20Cells that Span Many Columns PAGEREF _Toc514707794 \h 21Example PAGEREF _Toc514707795 \h 21Cells that Span Many Rows PAGEREF _Toc514707796 \h 21Example PAGEREF _Toc514707797 \h 21Adding a Caption PAGEREF _Toc514707798 \h 22Example PAGEREF _Toc514707799 \h 22HTML?Lists - Unordered PAGEREF _Toc514707800 \h 22Ordered HTML List PAGEREF _Toc514707801 \h 23Default PAGEREF _Toc514707802 \h 23Numbers PAGEREF _Toc514707803 \h 23Uppercase Letters: PAGEREF _Toc514707804 \h 23Lowercase Letters: PAGEREF _Toc514707805 \h 23Uppercase Roman Numbers: PAGEREF _Toc514707806 \h 23Lowercase Roman Numbers: PAGEREF _Toc514707807 \h 23Conrol List Counting: PAGEREF _Toc514707808 \h 23<ol?start="50"> ??<li>Coffee</li> ??<li>Tea</li> ??<li>Milk</li> </ol> PAGEREF _Toc514707809 \h 23HTML Description Lists PAGEREF _Toc514707810 \h 23Example PAGEREF _Toc514707811 \h 24Nested HTML Lists PAGEREF _Toc514707812 \h 24Example PAGEREF _Toc514707813 \h 24HTML?Iframes PAGEREF _Toc514707814 \h 24Iframe - Set Height and Width PAGEREF _Toc514707815 \h 25Example PAGEREF _Toc514707816 \h 25Example PAGEREF _Toc514707817 \h 25Iframe - Target for a Link PAGEREF _Toc514707818 \h 25Example PAGEREF _Toc514707819 \h 25HTML?Forms PAGEREF _Toc514707820 \h 25HTML?Multimedia PAGEREF _Toc514707821 \h 25What is Multimedia? PAGEREF _Toc514707822 \h 25Multimedia Formats PAGEREF _Toc514707823 \h 26Common Video Formats PAGEREF _Toc514707824 \h 26The HTML <video> Element PAGEREF _Toc514707825 \h 26Example PAGEREF _Toc514707826 \h 26The HTML <audio> Element PAGEREF _Toc514707827 \h 27Example PAGEREF _Toc514707828 \h 27What is HTML?HTML is the standard markup language for creating Web pages.HTML stands for Hyper Text Markup LanguageHTML describes the structure of Web pages using markupHTML elements are the building blocks of HTML pagesHTML elements are represented by tagsHTML tags label pieces of content such as "heading", "paragraph", "table", and so onBrowsers do not display the HTML tags, but use them to render the content of the pageA Simple HTML DocumentExampleExample ExplainedThe <!DOCTYPE html> declaration defines this document to be HTML5The <html> element is the root element of an HTML pageThe <head> element contains meta information about the documentThe <title> element specifies a title for the documentThe <body> element contains the visible page contentThe <h1> element defines a large headingThe <p> element defines a paragraphHTML TagsHTML tags are element names surrounded by angle brackets:<tagname>content goes here...</tagname>HTML tags normally come?in pairs?like?<p>?and?</p>The first tag in a pair is the?start tag,?the second tag is the?end tagThe end tag is written like the start tag, but with a?forward slash?inserted before the tag nameThe start tag is also called the?opening tag, and the end tag the?closing tag.Web BrowsersThe purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.The browser does not display the HTML tags, but uses them to determine how to display the document: HTML VersionsSince the early days of the web, there have been many versions of HTML:VersionYearHTML1991HTML 2.01995HTML 3.21997HTML 4.011999XHTML2000HTML52014HTML?ElementsAn HTML element usually consists of a?start?tag and?end?tag, with the content inserted in between:<tagname>Content goes here...</tagname>The HTML?element?is everything from the start tag to the end tag:<p>My first paragraph.</p>Start tagElement contentEnd tag<h1>My First Heading</h1><p>My first paragraph.</p><br>HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).HTML?AttributesAttributes provide additional information about HTML elements.All HTML elements can have?attributesAttributes provide?additional information?about an elementAttributes are always specified in?the start tagAttributes usually come in name/value pairs like:?name="value"The href AttributeHTML links are defined with the?<a>?tag. The link address is specified in the?href?attribute:Example<a?href="">This is a link</a>The src AttributeTML images are defined with the?<img>?tag.The filename of the image source is specified in the?src?attribute:Example<img?src="img_girl.jpg" />The width and height AttributesImages in HTML have a set of?size?attributes, which specifies the width and height of the image:Example<img?src="img_girl.jpg"?width="500"?height="600">The image size is specified in pixels: width="500" means 500 pixels wide.The alt AttributeThe?alt?attribute specifies an alternative text to be used, when an image cannot be displayed.The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.Example<img?src="img_girl.jpg"?alt="Girl with a jacket">The style AttributeThe?style?attribute is used to specify the styling of an element, like color, font, size etc.Example<p?style="color:red">I am a paragraph</p>The title AttributeHere, a?title?attribute is added to the?<p>?element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:Example<p?title="I'm a tooltip">This is a paragraph.</p>Use Lowercase AttributesThe HTML5 standard does not require lowercase attribute names.The title attribute can be written with uppercase or lowercase like?title?or?TITLE.W3C?recommends?lowercase in HTML, and?demands?lowercase for stricter document types like XHTMLQuote Attribute ValuesThe HTML5 standard does not require quotes around attribute values.The?href?attribute, demonstrated above,?can?be written without quotes:Bad<a?href="">Single or Double Quotes?Double quotes around attribute values are the most common in HTML, but single quotes can also be used.In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:<p?title='John "ShotGun" Nelson'>Or vice versa:<p?title="John 'ShotGun' Nelson">Chapter SummaryAll HTML elements can have?attributesThe?title?attribute provides additional "tool-tip" informationThe?href?attribute provides address information for linksThe?width?and?height?attributes provide size information for imagesThe?alt?attribute provides text for screen readersAt W3Schools we always use?lowercase?attribute namesAt W3Schools we always?quote?attribute values with double quotesHTML?HeadingsHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>Headings Are ImportantSearch engines use the headings to index the structure and content of your web pages.Users skim your pages by its headings. It is important to use headings to show the document structure.<h1>?headings should be used for main headings, followed by?<h2>?headings, then the less important?<h3>, and so on.HTML Horizontal RulesThe?<hr>?tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.The?<hr>?element is used to separate content (or define a change) in an HTML page:HTML ParagraphsThe HTML?<p>?element defines a?paragraph:Example<p>This is a paragraph.</p><p>This is another paragraph.</p>HTML?StylesThe HTML Style AttributeSetting the style of an HTML element, can be done with the?style?attribute.The HTML?style?attribute has the following?syntax:<tagname?style="property:value;">The?property?is a CSS property. The?value?is a CSS value.HTML Background ColorThe?background-color?property defines the background color for an HTML element.This example sets the background color for a page to powderblue:Example<body?style="background-color:powderblue;"><h1>This is a heading</h1><p>This is a paragraph.</p></body>HTML Text ColorThe?color?property defines the text color for an HTML element:Example<h1?style="color:blue;">This is a heading</h1><p?style="color:red;">This is a paragraph.</p>HTML FontsThe?font-family?property defines the font to be used for an HTML element:Example<h1?style="font-family:verdana;">This is a heading</h1><p?style="font-family:courier;">This is a paragraph.</p>HTML Text SizeThe?font-size?property defines the text size for an HTML element:Example<h1?style="font-size:300%;">This is a heading</h1><p?style="font-size:160%;">This is a paragraph.</p>HTML Text AlignmentThe?text-align?property defines the horizontal text alignment for an HTML element:Example<h1?style="text-align:center;">Centered Heading</h1><p?style="text-align:center;">Centered paragraph.</p>HTML Formatting ElementsHTML also defines special?elements?for defining text with a special?meaning.HTML uses elements like?<b>?and?<i>?for formatting output, like?bold?or?italic?text.Formatting elements were designed to display special types of text:<b>?- Bold text<strong>?- Important text<i>?- Italic text<em>?- Emphasized text<mark>?- Marked text<small>?- Small text<del>?- Deleted text<ins>?- Inserted text<sub>?- Subscript text<sup>?- Superscript textHTML Comment TagsYou can add comments to your HTML source by using the following syntax:<!-- Write your comments here -->With comments you can place notifications and reminders in your HTML:Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:HTML?ColorsIn HTML, a color can be specified by using a color nameHTML supports?140 standard color names.TomatoOrangeDodgerBlueMediumSeaGreenGraySlateBlueVioletLightGrayBackground ColorYou can set the background color for HTML elements:Example<h1?style="background-color:DodgerBlue;">Hello World</h1><p?style="background-color:Tomato;">Lorem ipsum...</p>Text ColorYou can set the color of text:Example<h1?style="color:Tomato;">Hello World</h1><p?style="color:DodgerBlue;">Lorem ipsum...</p><p?style="color:MediumSeaGreen;">Ut wisi enim...</p>HTML Links - HyperlinksHTML links are hyperlinks.You can click on a link and jump to another document.When you move the mouse over a link, the mouse arrow will turn into a little hand.A link does not have to be text. It can be an image or any other HTML element.SyntaxIn HTML, links are defined with the?<a>?tag:<a?href="url">link text</a>Example<a?href="">Visit our HTML tutorial</a>The?href?attribute specifies the destination address () of the link.The?link text?is the visible part (Visit our HTML tutorial).Clicking on the link text will send you to the specified address.Local Linkshe example above used an absolute URL (A full web address).A local link (link to the same web site) is specified with a relative URL (without ....).Example<a?href="html_images.asp">HTML Images</a>HTML Links - The target AttributeThe?target?attribute specifies where to open the linked document.The target attribute can have one of the following values:_blank - Opens the linked document in a new window or tab_self - Opens the linked document in the same window/tab as it was clicked (this is default)_parent - Opens the linked document in the parent frame_top - Opens the linked document in the full body of the windowframename?- Opens the linked document in a named frameThis example will open the linked document in a new browser window/tab:Example<a?href=""?target="_blank">Visit W3Schools!</a>HTML Links - Image as LinkIt is common to use images as links:Example<a?href="default.asp">??<img?src="smiley.gif"?alt="HTML tutorial" /></a>Link TitlesThe?title?attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.Example<a?href=""?title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>Create a BookmarkHTML bookmarks are used to allow readers to jump to specific parts of a Web page.Bookmarks can be useful if your webpage is very long.To make a bookmark, you must first create the bookmark, and then add a link to it.When the link is clicked, the page will scroll to the location with the bookmark.ExampleFirst, create a bookmark with the?id?attribute:<h2?id="C4">Chapter 4</h2>Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:<a?href="#C4">Jump to Chapter 4</a>HTML?Imagesimages can improve the design and the appearance of a web pageExample<img?src="pulpitrock.jpg"?alt="Mountain View"><img?src="img_girl.jpg"?alt="Girl in a jacket"><img?src="img_chania.jpg"?alt="Flowers in Chania">HTML Images SyntaxIn HTML, images are defined with the?<img>?tag.The?<img>?tag?is empty, it contains attributes only, and does not have a closing tag.The?src?attribute specifies the URL (web address) of the image:<img?src="url">The alt AttributeThe?alt?attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).The value of the?alt?attribute should describe the image:mage Size - Width and HeightYou can use the?style?attribute to specify the width and height of an image.Example<img?src="img_girl.jpg"?alt="Girl in a jacket"?style="width:500px;height:600px;">HTML?TablesDefining an HTML TableAn HTML table is defined with the?<table>?tag.Each table row is defined with the?<tr>?tag. A table header is defined with the?<th>?tag. By default, table headings are bold and centered. A table data/cell is defined with the?<td>?tag.Note:?The?<td>?elements are the data containers of the table.They can contain all sorts of HTML elements; text, images, lists, other tables, etc.Decorating table with stylesCells that Span Many ColumnsTo make a cell span more than one column, use the?colspan?attribute:Example<table?style="width:100%">??<tr>????<th>Name</th>????<th?colspan="2">Telephone</th>??</tr>??<tr>????<td>Bill Gates</td>????<td>55577854</td>????<td>55577855</td>??</tr></table>Cells that Span Many RowsTo make a cell span more than one row, use the?rowspan?attribute:Example<table?style="width:100%">??<tr>????<th>Name:</th>????<td>Bill Gates</td>??</tr>??<tr>????<th?rowspan="2">Telephone:</th>????<td>55577854</td>??</tr>??<tr>????<td>55577855</td>??</tr></table>Adding a CaptionTo add a caption to a table, use the?<caption>?tag:Example<table?style="width:100%">??<caption>Monthly savings</caption>??<tr>…HTML?Lists - Unordered<ul>??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ul><ul?style="list-style-type:disc">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ul><ul?style="list-style-type:circle">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ul><ul?style="list-style-type:square">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ul><ul?style="list-style-type:none">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ul><ul type=”square”>??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ul>Ordered HTML ListAn ordered list starts with the?<ol>?tag. Each list item starts with the?<li>?tag.The list items will be marked with numbers by default:Default<ol>??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>Numbers<ol?type="1">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>Uppercase Letters:<ol?type="A">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>Lowercase Letters:<ol?type="a">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>Uppercase Roman Numbers:<ol?type="I">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>Lowercase Roman Numbers:<ol?type="i">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>Conrol List Counting:<ol?start="50">??<li>Coffee</li>??<li>Tea</li>??<li>Milk</li></ol>HTML Description ListsHTML also supports description lists.A description list is a list of terms, with a description of each term.The?<dl>?tag defines the description list, the?<dt>?tag defines the term (name), and the?<dd>?tag describes each term:Example<dl>??<dt>Coffee</dt>??<dd>- black hot drink</dd>??<dt>Milk</dt>??<dd>- white cold drink</dd></dl>Nested HTML ListsList can be nested (lists inside lists):Example<ul>??<li>Coffee</li>??<li>Tea? ??<ul>??? ??<li>Black tea</li>??????<li>Green tea</li>????</ul>??</li>??<li>Milk</li></ul>HTML?IframesAn iframe is used to display a web page within a web page.Iframe - Set Height and WidthUse the?height?and?width?attributes to specify the size of the iframe.The attribute values are specified in pixels by default, but they can also be in percent (like "80%").Example<iframe?src="demo_iframe.htm"?height="200"?width="300"></iframe>Or you can use CSS to set the height and width of the iframe:Example<iframe?src="demo_iframe.htm"?style="height:200px;width:300px;"></iframe>Iframe - Target for a LinkAn iframe can be used as the target frame for a link.The?target?attribute of the link must refer to the?name?attribute of the iframe:Example<iframe?src="demo_iframe.htm"?name="iframe_a"></iframe><p><a?href=""?target="iframe_a"></a></p>HTML?FormsHTML?MultimediaWhat is Multimedia?Multimedia comes in many different formats. It can be almost anything you can hear or see.Examples: Images, music, sound, videos, records, films, animations, and more.Web pages often contain multimedia elements of different types and formats.In this chapter you will learn about the different multimedia formats.Multimedia FormatsMultimedia elements (like audio or video) are stored in media files.The most common way to discover the type of a file, is to look at the file extension.Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .mon Video Formats-46990-137604500MP4 is the new and upcoming format for internet video.MP4 is recommended by YouTube.MP4 is supported by Flash Players.MP4 is supported by HTML5The HTML <video> ElementTo show a video in HTML, use the?<video>?element:Example<video?width="320"?height="240"?controls>??<source?src="movie.mp4"?type="video/mp4">??<source?src="movie.ogg"?type="video/ogg">Your browser does not support the video tag.</video>The HTML <audio> ElementTo play an audio file in HTML, use the?<audio>?element:Example<audio?controls>??<source?src="horse.ogg"?type="audio/ogg">??<source?src="horse.mp3"?type="audio/mpeg">Your browser does not support the audio element.</audio> ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download