Professional Documents
Culture Documents
20483B ENU Companion
20483B ENU Companion
, to denote the start of, the paragraph, © Text content. = Adlosing ta paragraph. }.
, to denote the end of the Tags and elements are sometimes referred to interchangeably, although this is incorrect. An ‘element consists of tags and content. “HIML elements define the structure and semantics ‘of cantent on a web page “Elements identify their content by surrounding it with 2 start and an end tag Elements can be nested: *Use attributes to provide ational information about the content of an element1-4 _eniewof HAL ad 35 Nest elements within each other to elicit more semantic information about the content. If tis nat obvious from the context, indent nested elements to help keep track of which are parent and which are child elements ‘The body of a simple document ‘eh class-"blue">an introduction to elenents, tags and contents D> “identifies paragraphs of text. © chl>,
The openness of WorldideHed neant many different web browsers were created early (on, including Netscape Navigator and NCSA Mosaic, uivich Tater became Internet Explorer.
element, in which case the browser displays all the spaces. Emphasis HTML defines four elements that denote a change in emphasis in the text they surround from the text in which they are nested: ‘+ identifies text that is more important than its surrounding text. The browser usually renders this content in bold. ‘©and identity text to be rendered in bold or in italics, respectively. You can combine and nest the , , , and elements to indi emphasis, te different types of Browsers can render emphasized text in many different ways. Adding stress to text cs “To is to give extra weight to (z communication); BD Note:The and elements in HTML are simply instruction for displaying the text, rather than specifying than some semantic meaning. In HTMLS, it is better to use and rather than and . Lists Lists organize sets of information in a clear and easily understood format. HTML defines three types of list: ‘+ Unordered lists group sets of items in no particular order. ‘© Ordered lists group sets of items in a particular order.1-6 _Qveniewof HAL ad C35 * Definition lists group sets of name-value pairs, such as terms and their definitions All three lis types use a tag to define the start and end of the lst - ,
‘SpeHere's how to write @ web page, and
respectively Individual lst entries are identified with the
- tag for unordered and ordered lists, while definition ists Use two tags per list item;
- for the name, or term, and
- for its value, or definition, HTML provides for lsting sets of things, steps, and name-value pairs Unordered, ordered, and definition lists
‘ -Here’s 2 smal] 1ist of HTML editors
cusS}ievisual Studio«/11> “peHere’s 2 snall Tist of people in the Internet Hal) of Fame and what they dide/p>
SlisAdd sone HTML 11> ‘ ‘ edtsLirus Torvaldse/dt> ‘dgsOriginator of Linux You can also include anather list within a lst item, as long as the nested list relates to that one specific item. The nested list does not have to be the same type of list as its parent, although context dictates that this is usually the case. ‘You may write a table of contents as an ordered lst of chapter names. Each list item may then include a nested list of headings within that chapter. Writing nested lists ‘col ‘ elipForms1i> fit ‘lipLesson Two: Introduction to CSS«/11> Browsers usually render nested lists by indenting them further into the page, and additionally changing ‘the bullet point style for unordered lists or restarting the list numbering for ordered lists.Progen in HTML ith eat and SSS 1-7 Displaying Images and Linking Documents in HTML You use the HTML tag to insert an image into your web page. It does not require an end tag | “Use the tag to display an image asit does not contain any content. In addition to Tha se tite species the URL of te brag sour: the global attributes, the tag has a number he gb ateteges the to ep" eg ego wa + The sre attribute specifies a URL that identifies | Use the tag tocdefine a tnk the location of the image to be displayed The ref aibute species the tape of the ink + The alt atribute identifies a text alternative cs ‘ Additional Reading: With so many hardware devices-phones, tablets, televisions, and ‘monitors-offering the user a chance to browse a web page in many different resolutions, it has become very important to offer the same image at different sizes rather than always getting the browser to scale the picture. The problem now is how to identify which version of the image should be displayed at which resolution, The W3C Responsive Images Community Group |hetpy//mrw.w3.0rg/community/respima/ is hoping to figure out this problem soon. Hypertext Links ‘The main reason forthe invention of HTML was to link documents together. The tag, also known as the anchor tag, allows you to identify a section of content in your web page to link to another resource on. the web. Typically the target ofthis hypertext link is another web page, but it could equally be a text fie, image, archive fle, email, or web service. When you view your web page in a browser, you click the content surrounded by the anchor tags to have the linked document downloaded by the browser. ‘Anchor tags have the following non-global attributes +The href attribute identifies the web page or resource to link to1-8 _veniewof HAL and C35 ‘+ The target attribute identifies where the browser wil display the linked page; valid values are blank, _parent,_self, and top. + Therel attribute identities what kind of link is being created, + The hreflang attribute identifies the language of the linked resource. ‘+ The type attribute identifies the MIME type of the linked resource, ‘One common use for hypertext links is to build a navigation menu on a page so the user can visit other pages inthe site ‘Adding hypertext links to your web page ‘
- Hona11>
1i> Slivea href="essays.ntal” alte"A list of my essays">Essaysc/a> ‘The href attribute is the most important part of linking one online resource to another. You can use several different value types: ‘+ AURLin the same folder (for example: about htm). ‘* AURL relative to the current folder (for example: ./about htm) + AURL absolute to the server root (for example: /pages/about htm. + AURLon a different server (for example: http://www. microsoft.com/default htm) ‘+ A fragment identifier or id name preceded by a hash (for example: #section2) + A combination of URL and fragment identifier (for example: about html4section2). Gathering User Input by Using Forms in HTML Many web sites require the user to input information, such as a user name, password, or address, Text and images define content that a user can read, buta form provides a user with a basic level of interaction with a site, giving the User an opportunity to provide data that will be sent to the server for collation and processing, Use the HTML