Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML Elements Guide - Text, Lists, Links and Images
Similar a HTML Elements Guide - Text, Lists, Links and Images (20)
Más de apnwebdev
Más de apnwebdev (11)
HTML Elements Guide - Text, Lists, Links and Images
- 1. HTML Elements Colin Gourlay & Kevin Vanderbeken
- 2. Today: Text Elements Lists Links Images
- 4. <h3>There's a lot of space in this heading</h3> ...is the same as... <h3>There's a lot of space in this heading</h3>
- 6. headings <h1> <h2> <h3> <h4> <h5> <h6>
- 7. <h1>HTML Elements</h1> <h2>In This Lesson</h2> <h3>Assumed Knowledge</h3> <h2>Text Elements</h2> <h3>Semantic Structure</h3> <h3>Headings</h3> <h3>Paragraphs</h3> <h3>Common Inline Text Elements</h3> <h2>Lists</h2> and so on...
- 9. <p>This is a very short paragraph. It only has two sentences.</p>
- 10. common inline text elements <em> <strong>
- 11. <p><em>Please note:</em> the kettle must be unplugged every evening.</p> Please note: the kettle must be unplugged every evening.
- 12. <p><em>Please note: the kettle <strong>must</strong> be unplugged every evening, otherwise it will explode - <strong>killing us all</strong>.</em></p> Please note: the kettle must be unplugged every evening, otherwise it will explode - killing us all.
- 13. lists
- 14. unordered lists <ul> <li>
- 16. bread
- 17. butter
- 18. coffee beans
- 19. bread
- 20. coffee beans
- 21. milk
- 22. butteror
- 23. <ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul>
- 24. ordered lists <ol> <li>
- 25. Gather ingredients Mix ingredients together Place ingredients in a baking dish Bake in oven for an hour Remove from oven Allow to stand for ten minutes Serve
- 26. Gather ingredients Bake in oven for an hour Remove from oven Serve Place ingredients in a baking dish Allow to stand for ten minutes Mix ingredients together
- 27. <ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in a baking dish</li> <li>Bake in oven for an hour</li> <li>Remove from oven</li> <li>Allow to stand for ten minutes</li> <li>Serve</li> </ol>
- 28. letters Lowercase ascii letters (a, b, c...) Uppercase ascii letters (A, B, C...) Lowercase classical Greek: (έ, ή, ί...)
- 29. numbers Decimal numbers (1, 2, 3...) Decimal numbers with leading zeros (01, 02, 03...) Lowercase Roman numerals (i, ii, iii...) Uppercase Roman numerals (I, II, III...) Traditional Georgian numbering (an, ban, gan...) Traditional Armenian numbering (mek, yerku, yerek...)
- 30. nested lists
- 31. Chapter One Section One Section Two Section Three Chapter Two Chapter Three
- 32. <ol> <li>Chapter One<ol> <li>Section One</li> <li>Section Two</li> <li>Section Three</li> </ol></li> <li>Chapter Two</li> <li>Chapter Three</li> </ol>
- 33. Links <a href=""> </a>
- 34. Links (anchor tags): Allows jumping between (x)html documents! Wrapping content or other inline elements with an <a> element and you create an ‘anchor’ point to somewhere else (and link them together). <p>You can search the internet from the <a href=“http://www.google.com">Google</a> homepage.</p>
- 35. Attributes of Anchors: href - the resource it points to (external document or an anchor ID). id - the anchor ID if the anchor is a target and not a link title - extra information about the external resource.
- 36. Attributes of Anchors: Href’s can tell us to link to: Relative links – figured out from the current URL. href=“page.html” would look for that file in the same location of the document. href=“somewhere/page.html” is a subfolder called “somewhere” in the same location of the document you have open. href=“/somewhere/page.html” is a subfolder from the root of the site. Absolute links – figured out from the top level URL. An absolute link defines the location of the document from scratch: The protocol to use to get the document, the server to get it from, the directory it is located in, and the name of the document itself: http://businessfinda.com.au/somewhere/page.html If you specify a different domain name, and are linking to another site, then that’s also known as an external link.
- 37. Attributes of Anchors: Href’s can tell us to link to: Fragment Identifiers – Linking to specific things in a page. href=“#in-this-lesson” would look inside the current document for an element with the ID of in-this-lesson. A Fragment Anchor point:<h2>In This Lesson <a id="in-this-lesson">¶</a> Linking to that point in the page from another page:<a href="/somepage.html#footer">The footer on some page on this site</a>
- 38. Attributes of Anchors: Href’s can tell us to link to: Non-HTML Resources – for something completely different. Forms of absolute links which tell the browser to use a different protocol, like mailto. Clicking this would open a compose new email window on most computers (with the address filled in):<a href="mailto:colin.gourlay@apn.com.au">Email Colin</a>
- 39. Images <imgsrc="" alt="" />
- 40. Images: Images might be turned off to save bandwidth on some browsers. Visitors may be visually impaired to a degree. Search engines are picture illiterate.
- 41. The img Element: <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /> It’s an empty element – self closing tag. src - Image Source - The URL of the image you want to display (quite similar to the href attribute on the a element) alt - Alternative Text - This is displayed instead of the image under certain circumstances. title - Image Title - Extra information about the image. This is displayed as a tooltip when you hover your mouse over the image.
- 42. When good img’s go bad <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /> Sometimes the image may not be available because it got lost, connection issues, or because of the user agent (normally what we know as the browser). Sometimes you can’t actually see them – Accessibility. In these cases the alt attribute is provided. This is what you keep hearing people call the “alt tags”. It’s alt="" IN an element tag.
- 43. The img Element: <a href=“http://www.im-a-cat-site.com"> <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /> </a> You can nest images inside other elements of course... It’s part of the normal document hierarchy. When you want a clickable image, you’re putting an img element inside of an anchor element a!
- 44. next week...
- 45. Workshop writing HTML OR Styling HTML with CSS
Notas del editor
- We use HTML to describe the meaning of the content within the body of our documents. As most of out content is text, we spend a lot of time working with HTML elements that describe and contain text. In this section, we will look at general structural elements such as headings and paragraphs. An important point to cover before we start discussing text, though, is that of space, specifically the space between words. When writing HTML, the source document will contain what is termed “white space” — the characters in the file that serve to separate text. In HTML, multiple occurrences of these characters are treated as a single space character. For example: (next slide)
- This can be a source of confusion for first-time authors of an HTML document, who try to pad out text with extra spaces to achieve a desired indentation, or to get more spacing after the period between sentences and introduce more vertical space between paragraphs. As we've said before, and will keep re-iterating to you, the visual layout of your documents should not be written in HTML, but in CSS.
- Semantic structure is something we strive to achieve with all of the content we publish on the web. Essentially, it is the idea that your content can be broken down into a set of logical components that will always be interpreted in the same way, regardless of who (or what) is visiting your website. It is important to use proper semantic structure to describe the document in terms of section, sub-section, sub-sub-section as this makes the document more understandable to screen readers and to automated processes (like Google's indexing bots). The main HTML elements we can use to structure our content are headers and paragraphs, which we'll now look at in more detail.
- Once your page / article has been broken down into logical sections, each section should be introduced by an appropriate header. HTML defines six levels of header: h1, h2, h3, h4, h5, and h6 (from the highest importance to the lowest). Generally speaking, the h1 would be the main heading of the entire page and introduce everything. h2 is then used to break the page up into sections, h3 the sub-sections, and so on. A good example of a header structure, using this document as a template, would look like this: (next slide)
- <h1>HTML Elements</h1><h2>In This Lesson</h2><h3>Assumed Knowledge</h3><h2>Text Elements</h2><h3>Semantic Structure</h3><h3>Headings</h3><h3>Paragraphs</h3><h3>Common Inline Text Elements</h3><h2>Lists</h2>and so on...
- The paragraph is the building block of most documents. In HTML a paragraph is represented by the p element, which takes no special attributes. For example: (next slide)
- A paragraph in many articles and books can contain just one sentence. Whilst the meaning (in terms of written prose) of "paragraph" is fairly clear, on the web much shorter areas of text are often wrapped in paragraph elements as the author believes this is more "semantic" than using a div element (a generic container element which we'll talk about in the coming weeks).A paragraph is a collection of one or more sentences, just as in newspapers and books. On the web, it is good form to use the paragraph element for this and not just any random piece of text in the page. If it is just a few words and not even a proper sentence, then it should probably not be marked up as a paragraph.
- We covered the difference between inline and block elements in our last HTML lesson, so have a quick look back if you need a refresher. The paragraph element and the various heading elements we've just covered are all block elements (i.e. HTML that follows them is displayed on a new line). Sometimes we want to add extra emphasis to certain words or sentences in a paragraph of text, and we need that emphasis to appear inline (i.e. it doesn't break the flow of text). HTML contains two methods for indicating that the text within needs to be emphasised to the user, such as error messages, warnings, or notes. For visual browsers this normally means applying a different colour, font or making the text bolder or italicised. For users of screen readers this can result in a different voice or other auditory effect. For text that needs to be emphasised, you use the em element, like so: (next slide)
- All browsers by default interpret the em element as italicized text, and render it as such.If an entire sentence was to be emphasised, but there was still a point within that sentence needed to be emphasised further, you'd use the strongelement to indicate stronger emphasis than normal, like so: (next slide)
- The strong element does not need to be used inside the em element, so you can use it on its own to add heavy emphasis to certain words in a paragraph. As previously mentioned, all browsers have default styling for em and strong elements, but these can overridden with your own CSS. This will be the main focus of next week's lesson.
- Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web development lists are workhorse elements, frequently used for navigation as well as general content. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful for a purely practical reason - they give you extra elements to attach CSS rules to, opening up a whole variety of styling options. In this section, we'll cover the different list types available in HTML, when and how you should use them, with a couple of practical examples placed throughout. First of all, have a look back at the In This Lesson section at the start of the article format of this lesson (on the wiki). You're looking at a list of elements. Each item in the list is called an li element, but their presentation depends on whether its parent element is an unordered list, or an ordered list. We'll highlight both of these types now.
- Unordered lists, or bulleted lists, are used when a set of items can be placed in any order. An example is a shopping list: (next slide)
- These items are all part of one list, however, you could put the items in any order and the list would still make sense.You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets - we’ll look at how to do that in the coming CSS lessons. Unordered lists are represented in HTML by the ul element, containing one or more li elements: (next slide)
- Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. An example would be cooking instructions, which must be completed in order for the recipe to work: (next slide)
- If the list items were moved around into a different order, the information would no longer make sense: (next slide)
- Again, you can use CSS to change the style of your lists. Ordered lists are represented in HTML by the ol element, containing one or more li elements: (next slide)
- As the numbering of list elements is handled automatically, it becomes much easier for you to reorder your list items without having to manually update the numbers on each of the list items. Ordered lists can be displayed with one of several numbering or alphabetic systems - that is, letters or numbers. The default in most browsers is decimal numbers, but there are more options: (next slide)
- ...and...
- ...but this can only be achieved using CSS, so we'll leave the code examples until next week's lesson.
- Any combination of unordered and ordered lists can be used to build a nested list, and it gives us a very powerful way to markup hierarchies and trees of data. Here's an example: (next slide)
- The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks as follows: (next slide)
- Note how the nested list starts after the <li> and the text of the containing list item "Chapter One" then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the structure of the website. Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.
- Links ¶Links allow the reader of a document to follow them to another document and jump from server to server without having to disconnect and connect all over again. A lot has happened since they were first invented but one thing stayed the same: links are a very important part of the web experience and you can make it easy or hard for your web site’s visitors depending on how you use them. You can turn any inline element in the document into an anchor link by adding an a element around it. For example, in the following HTML document the text Google gets turned into a link: <p>You can search the internet from the <a href="http://www.google.com">Google</a> homepage.</p> This will be rendered in the page as: You can search the internet from the Google homepage. Visitors activating this link (either by clicking it with a mouse, or activating it with the keyboard or voice in some cases) will leave the current site and go to the Google homepage at http://www.google.com. Notice above that the link is displayed in blue and is underlined. That's more of the browser's default styling being applied to the element, but like everything else you've seen in this lesson, the default styling can be overridden with your own CSS.
- Attributes of LinksThe reason that the link takes us to http://www.google.com is because that was the URL specified in the href attribute. The anchor (a element) has several attributes you can add: href - the resource it points to (either an external file or an anchor ID).id - the anchor ID if the anchor is a target and not a link (explained below).title - extra information about the external resource. The href AttributeAn a element can play several roles depending on which attributes are set. The most common attribute you’ll use is the href attribute, which defines what resource the link points to. This attribute can contain different values:
- Relative LinksA URL in the same folder (help.html), relative to the current folder (for example “../../help/help.html”—2 dots means “go up one level in the site folder hierarchy”). For example, if you were currently viewing the page at http://www.businessfinda.com.au/all-locations/building-construction/ and clicked on a link that looked like this: <a href="../retail/">Retail in All Locations</a> ...you would be taken to http://www.businessfinda.com.au/all-locations/retail/ A URL can be relative to the server root (for example “/help/help.html”—having a forward slash at the front of the address means the address starts at the root of the server the page is on). For example, if you were currently viewing the page at http://www.businessfinda.com.au/all-locations/building-construction/ and clicked on a link that looked like this: <a href="/warwick/">All Categories in Warwick</a> ...you would be taken to http://www.businessfinda.com.au/all-locations/retail/ Absolute LinksA URL defined completely from scratch. It could be on a different server altogether. For example, if you were currently viewing the page at http://www.businessfinda.com.au/all-locations/building-construction/ and clicked on a link that looked like this: <a href="http://www.localclassifieds.com.au/">Local Classifieds</a> ...you would be taken to http://www.localclassifieds.com.au/ That's also known as an external URL, and it is written in it's absolute form.
- Fragment IdentifiersThere is actually a fourth type of link that you can specify using the href attribute, and this is where the id attribute comes into play. By specifying a href that begins with a # (hash) symbol, you can actually link to locations inside the page you are currently visiting. Have a look at this example: <a href="#in-this-lesson">Find out what's in this lesson</a> Now here is the link that it produces: Find out what's in this lesson When you click this link, you'll end up back at the start of this article. To get back to this section on Links, click the respective link in the list (we've implemented the same functionality to target this section. Try it out now. We'll be waiting back down here... This is made possible by the id attribute, which if you remember, can be placed on any HTML attribute. When you click on a link that begins with a # symbol, it looks for an element with a matching id, and takes you to it. The In This Lesson header has an anchor tag inside it that looks like this: <h2>In This Lesson <a id="in-this-lesson">¶</a> All of the main sections in this article are set up in this way, so have a play around. These 'Fragment Identifiers' can be actually be mixed with the the three other types of links we've demonstrated, to allow you to link your users to a specific section on another page. A combination of an absolute link with a fragment identifier would look like this: <a href="/somepage.html#footer">The footer on some page on this site</a> We make use of this kind of link quite a lot on our own websites. When someone posts a comment on a feature on Finda, they are sent back to the same page, only this time, the view has already scrolled down to the comments that follow the feature. This comes in especially handy when we're working on websites that have a lot of sections in a single page.
- Non-HTML ResourcesYou can use anchor elements to tell the browser to do things other than take the user to another webpage. You've most likely seen links on page that say something along the lines of "email us" or "get in contact", which open up your email client with their address already filled in for you. You can enable this kind of functionality on your own pages by using a special format of the href attribute: <a href="mailto:colin.gourlay@apn.com.au">Email Colin</a> The mailto: bit at the beginning of the href instructs the browser to open up your default email client, and the address is pre-populated from whatever you specify in the remainder of the link. You can actually extend this further by pre-populating the email subject, and even the message itself. Have a look at our further resources if you're interested (we actually did this on the Business Finda preview site to give visitors a quick and easy way to register their interest in the product).
- Images ¶ It is very tempting to use a lot of imagery on your web sites. Images are a great way to set the mood for the visitor and illustrations are a nice way to make complex information easier to take in for visual learners.The drawback of images on the web is that not everybody who surfs the web can see them. Back in the days when images were first supported by browsers, many site visitors had images turned off, to save on traffic and get a faster surfing experience—web connections used to be very slow, and you’d pay a lot of money for each minute you were online. While this is not very common these days, we’re still not out of the woods—by a long shot: People surfing on mobile devices might still have images turned off because of small screens and the cost of downloading data.Visitors of your site might be blind or visually impaired to such a degree that they cannot see your images properly.Other visitors might be from a different culture and not understand the icons you use.Search engines only index text—they don’t analyze images (yet), which means that information stored in images cannot be found and indexed. It is therefore very important to choose images wisely and only use them when appropriate. It is even more important to make sure you always offer a fallback for those who cannot see your images. There is more on the problems of wrongly used icons and images in the “Web navigation and menus” tutorial later on in the series (to be published soon). For now, let’s see what technologies are available to add images to an HTML document. Images are commonly used in CSS to give your site a theme, and cater for things like backgrounds, custom buttons, icons, etc., but we'll be covering that more in depth in future lessons. The section is concerned purely with the HTML img element, and how we can use them to display contextual images that enhance our content. Image elements are one of those rare elements that have self-closing tags. This is because they don't contain any text - they are a placeholder for an image file, and nothing else.
- The img Element and its AttributesHere's what an image element looks like in HTML, complete with its more common attributes: <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="cat" title="a picture of a cat" /> This will display this following: Lets look at the attributes in more detail: src - Image Source - The URL of the image you want to display (quite similar to the href attribute on the a element)alt - Alternative Text - This is displayed instead of the image under certain circumstances.title - Image Title - Extra information about the image. This is displayed as a tooltip when you hover your mouse over the image. Try it now.
- The image may not be available because it could not be found, loaded or because the user agent (normally a browser) does not support images. In addition, people with visual disabilities use assistive technologies to read web pages to them. These technologies will read the contents of the alt attribute of img elements out to their users. It is therefore important to write good alternative text to describe the contents of the image and put it in the alt attribute. You’ll find a lot of articles on the web talking about “alt tags”. This is factually wrong as there is no tag (or element) with that name. It is an attribute of the img element and amazingly important both for accessibility and search engine optimization.
- Nesting Images in Other Elementsxxx Linking Imagesxxx