Module 7: HTML
What is the general format for a tag with 2 attributes?
<tagname attribute1="value1" attribute2="value2">
<br> shouldn't be used very often in practice to make a line break. What is 1 case in which it is commonly used?
Address line breaks
What does the <head> tag do in the html doc?
Gives more information about the webpage. It contains the <title> tag, which is the text to be displayed in the title bar of the webpage. It can also contain the <style> element, embedding CSS coding into the HTML file, or the <link> element, linking to a CSS file.
What does HTML stand for?
Hyper Text Markup Language
What is the <html> tag at the start of an HTML webpage? What is an optional attribute that can be used?
It opens and closes the document. It has an optional language attribute (ie, lang="en") which should be used to specify the language if the whole webpage is the same language.
If you don't specify the size of an image for the img tag, what is the default behaviour?
It will display at full size
What does the <ol> tag do?
Makes a numbered list
What are 3 character entity reference examples?
makes non breaking space & makes an ampersand < and > make less than and greater than signs. < and > are angular brackets... slightly different symbol.
What are the 4 essential elements of an HTML file for a webpage?
1. <!DOCTYPE html> 2. <html> 3. <head>, containing <title> 4. <body>
What are 3 ways to add whitespace in html?
1. <p> tags at the start (and optionally </p> at the end) of a paragraph add a line break and a blank line between paragraphs. 2. <br> inserts a line break in the middle of any element 3. adds a "non breaking space", aka a single extra space that doesn't break a line.
What are 2 ways you can specify height and width of an image using the height and width attributes of the img tag?
1. As a number of pixels 2. As a % of browser width. In this case the size will auto adjust with any changes in browser size.
How do you use an image from: 1. the internet? 2. the same folder as the webpage?
1. Use the full web address 2. Use the filename
What are 5 examples of optional closing tags used in this course? Why are they optional?
</p>: a paragraph ends when another begins </head>: head section ends when body begins </body>: body ends when document ends </html>: html ends when document ends </li>: list item ends when another begins
What is an example of the anchor tag using the webpage www.example.com?
<a href="www.example.com"> Text to be hyperlinked </a>
What should be used for section headers instead of <strong> if you want them to be bolded? Why is this important?
<h1> and <h2> tags. This allows various alternative text displays to interpret the nesting of the headings.
What are the 3 tags needed to make a table? How are the 3 tags organized?
<table> : starts the table (</table> ends the table) <tr> : denotes start of a table row <td> : denotes content of a cell <table> is only at the beginning (and end with closing tag) <tr> occurs at the start of each row within <table> tag <td> occurs within <tr> tag, denoting contents of each cell
What is the main purpose of using (non breaking space character entity reference)?
A line break will not occur in a so it can be used to ensure a line does not break between words at the end of a line despite browser window resizing. For example: This is a big space. No break would occur between "big" and "space" no matter the size of the browser window.
How do you assign an id attribute to an element?
Add an id attribute to the opening tag. ie, <h1 id="intro">
With the anchor tag, how would you link to a specific element within a different document?
Add the #idname of the element to the end of the destination address/file name.
What does <hr> tag do?
Adds a line break with a horizontal rule (line).
What is the rule for nesting paired tags?
An element must be fully contained within another element
What does the src attribute do in the img tag?
Assigns the source of the image
What does an email link do? How do you make one with the anchor tag?
Clicking an email link should open your email app. Use the format mailto:address in your link reference. ie, <a href="mailto:[email protected]">Email me</a>
What is the <body> section of an html doc?
Everything that is actually ON the webpage falls under <body>
What is an element?
Everything within the start and end tags, including the tags themselves
How can you display unicode characters in base ten or hex in html as character entity references?
In base 10: Ӓ In hex: 💩l Denotes character entity reference Denotes unicode Denotes hex
What is the default positioning of an image using the img tag? How do you fix this without using CSS?
In line with text. Use <p> or <br> to put it on a new line.
What does the <!DOCTYPE html> tag at the start of an HTML webpage do?
It tells the web browser that the document type is html, indicating the language and version of html (html5)
Since markup shouldn't be used to convey style of text in html, what should it be used for? Why is this important (2) ?
Markup should be used to convey meaning, ie emphasis and structure of text. This is important because: 1. alternative reading techologies (ie audioreaders) can interpret the markup in a non traditional way and convey the meaning of the text to the reader. 2. In web searches, certain terms in headings and citations may have more weight than regular text.
What are 2 examples of common plain text editors? What is 1 example of a WYSIWYG text editor?
Plain text: Notepad, Notepad++ WYSIWYG: Word
What does a tag attribute do?
Provides more info on the behaviour of the element
What is the alt attribute in the img tag for?
Providing text descriptions of images for environments where images can't be seen. Ie image source not available, or reader using alternate display.
With the anchor tag, how would you link within the same document (ie, return to top)?
Refer to the element's #id_name. To do this, assign an id attribute to the element (like a heading) you want to return to. ie, <a href="#intro">Return to Intro</a>
How are <em>, <cite>, and <i> tags similar? How are they different?
Similar: they all appear as italicized text in traditional text display. Different: <em> is used to convey emphasis on certain words. <cite> is used to note that the following text is a citation <i> is used to manually italicize text with no meaning behind the italics, for example foreign words.
What is the type attribute of the ol tag? What are 4 values you can use for the type attribute?
Specifies the numbering style. type="i" -> i, ii ,iii type="I" -> I, II, III type="a" -> a, b, c type="A" -> A, B, C
What does the "separation of content and style" refer to?
The content (text) should be able to adjust it's layout/formatting (style) based on the context of the reader
How do you make an image a link?
Use the <img> tag as the "clickable text" between an anchor opening and closing tag.
With the anchor tag, how would you link to an internal source (ie, a webpage from the same folder)?
Use the file name ie, <a href="hello.html>hello</a>
With the anchor tag, how would you link to an external source (ie, a webpage from somewhere else)?
Use the full link. ie, <a href="http://www.youtube.com">click here</a>
What are 2 optional tags of the <td> tag?
colspan and rowspan, which merge cells together (across a row or down a column) The value is the number of rows or columns that you want to merge.
What is the <li> tag?
defines a list item for bullet or numbered list
Where does the tag attribute go in a paired tag?
in the opening tag
What does the <ul> tag do?
makes a bullet list
What does the <strong> tag do?
makes the text bolded
Are tags case sensitive?
no
What are 4 attributes that can be added to the <img> tag?
src width height alt
What start and end characters denote a character entity reference?
start: & end: ;
How are h1, h2, h3, etc displayed differently?
the font gets smaller
What is a WYSIWYG text editor vs a plain text editor?
What You See Is What You Get: hides formatting (markup) Plain text: shows all markup
What is an optional attribute of <table> tag?
border border="1" -> has a border border="0" -> no border (default)