CHAPTER 3 - HTML (Text, Lists, Links, Images)

Adding text to our HTML page is simple using an element opened with the tag ___ which creates a new paragraph. We place all our regular text inside this element (most basic tag)

bold. Highlight important information

strong. Similar to bold, to highlight key text

italic. To denote text

emphasized text. Usually used as image captions

marked text. Highlight the background of the text

small text. To shrink the text

striked out text. To place a horizontal line across the text

underlined text. Used for links or text highlights

inserted text. Displayed with an underline to show an inserted text

subscript text. Typographical stylistic choice.

superscript text. Another typographical presentation style

Lists

are very common in web pages. They're used in online articles, navigation menus, and product features on e-commerce websites. (unordered, ordered, nested)

unordered list

is a simple HTML list that you can use when the order of the items you're listing isn't important, and rearranging the order wouldn't cause confusion or change the hierarchy of the list.

,

The ____ and _____ tags define the beginning and end of an unordered list.

,

The ____ and _____ tags are list item tags, which contain the items or points you are listing

Ordered lists

are used when the order of the items is important, for example, a list of instructions that must be followed in order. The syntax is the same as for unordered lists

nested list

is a little more complex, because it's essentially a "list within a list" with a variety of different indentations and bullet point types used to denote points and sub-points

HTML links

are hyperlinks which allow the user to click and navigate to another page or document. When a piece of text is hyperlinked, a mouse cursor will turn into a hand icon to show the user that it is clickable

, , href

insert a simple HTML link using the ___ and ____ tags and the ____ attribute

target

You can use a ______ attribute to specify where to open the link.

_self

target attribute. opens the link in the same window or tab as it was clicked

_blank

target attribute. opens the link in a new window or tab.

_parent

target attribute. opens the link in the parent frame

_top

target attribute. opens thelink in the body of the window

framename

target attribute. opens the link in a named frame

mailto:

Use _______ inside the href attribute to create a link that opens the user's email program (to let them send a new email)

Title

The image's _____ attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element

The _____ tag contains attributes only and does not have a closing tag. The src attribute, which you've already learned how to use, specifies the location (web address or URL) of the image.

Alt

The image's ___ attribute provides alternate text for an image, in case the user can't view the image itself. This could be caused by a slow Internet connection or an error in the src attribute.

Alt

Putting ___ attributes in place for your images ensures that your users (and search engines) can see what's meant to be there, even if there is a problem with loading the image