Chapter 1 - HTML Overview
What is the general code to display a specific symbol in Unicode?
&#code; where code is the encoding reference number. © displays the copyright symbol.
What line of code displays extra white space?
nbsp stands for nonbreaking space.
How do you link to an HTML file (frogfacts.html) that is within a folder (frogs) that is within a parent folder (amphibians) that is on your E drive?
/E|amphibians/frogs/frogfacts.html (That is a | character, not an i or L) If the linked document is on the same drive as the current folder, the drive letter is not needed.
How should you test your code when you are finished?
1.) Running it through a validator in order to check syntax. 2.) Ensure that the content is rendered correctly on any and all appropriate devices, such as a PC monitor, mobile phone, web browsers, etc. Popular testing services are BrowserStack (www.browserstack.com), CrossBrowserTesting (www.crossbrowsertesting.com), and Browsera (www.browsera.com).
How do you add a comment that says... "General Information about Curbside Thai "and more" ** Match formatting **
<!-- General Information about Curbside Thai and more -->
Write a conditional comment that states "You are not running Internet Explorer." if a user is not using Internet Explorer.
<!--[if !IE]> <p>You are not running Internet Explorer.</p> <![endif]-->
Write a conditional comment that states "Upgrade your browser to view this page." if a user's Internet Explorer is not updated to Version 8 or higher.
<!--[if lt IE 8]> <p>Upgrade your browser to view this page.</p> <![endif]-->
What is the line of code for the document type declaration (or doctype)?
<!DOCTYPE html> or <!doctype html>
What is the basic structure of an HTML file?
<!DOCTYPE html> <html> <head> ...head content </head> <body> ...body content </body> </html>
Write a line of code that allows the user to click "Click Here" to be directed to another section of the page that has the lunch menu.
<a href="#lunch">Click Here</a> <h2 id="lunch">Here is the Lunch Menu"</h2>
Write a line of code that links to the "ct_menu.html" page and is displayed as "Menu" to the user.
<a href="ct_menu.html">Menu</a>
Write a line of code that turns an image (filename: frog.jpg) into a clickable image that directs the user to another webpage (pagename: frogfacts.html). Include alt text for the picture ("A frog").
<a href="frogfacts.html"><img src="frog.jpg" alt="A frog"></a>
Write a line of code that allows the user to click "Click Here" to be directed to a specific section of another webpage (menu.html) that has the lunch menu.
<a href="menu.html#lunch">Click Here</a> <h2 id="lunch">Here is the Lunch Menu"</h2>
Write a line of code for a header using HTML5. Then write a line of code doing the same, but in HTML4.
<header></header> <div id="header"></div> <div id="heading"></div> <div id="top"></div> (any of these work)
What is the line of code for inserting an image? Then write a line of code that inserts an image located at "directory.jpg" with the alternative text "a picture of a filing cabinet".
<img src="filename" alt="text" /> <img src="directory.jpg" alt="a picture of a filing cabinet">
How do you indicate that a document is written using UTF-8?
<meta charset="utf-8" />
Write a line of code that assigns a website with the keywords "Thai, restaurant, Charlotte, and food" for search engines.
<meta name="keywords" content="Thai, restaurant, Charlotte, food" /> ** No longer effective for SEO **
What is a navigation list and what is it's general structure?
<nav> <ul> <li>link1</li> <li>link2</li> </ul> </nav> NOTE: These items will not direct anywhere yet.
Code a list that has three items (California, Texas, New York) at numbers 12, 40, and 93, respectively.
<ol> <li value="12">California</li> <li value="40">Texas</li> <li value="93">New York</li> </ol>
What are the three components of the following two-sided element tag: <p> Welcome to Curbside Thai.</p>
<p> - starting tag </p> - ending tag p - element Welcome to Curbside Thai - content
Which of the following tags are correct?: <p> Welcome to <em>Curbside Thai</em>.</p> <p> Welcome to <em>Curbside Thai</p>.</em>
<p> Welcome to <em>Curbside Thai</em>.</p> <p> Welcome to <em>Curbside Thai</p>.</em> is incorrect because, when using nested elements, the entire code of the inner element must be contained within the outer element, including opening and closing tags.
What is the line of code for time-stamping?
<time datetime="value">content</time> value should be in yyy-mm-dd / hh:mm format. ie; <time datetime="2017-03-01T14:52">March 1 2017 at 2:52</time>
Write a line of code that sets "document title" as the title of an HTML document.
<title>document title</title>
What is the general structure of a nested list?
<ul> <li>item1</li> <li>item2 <ul> <li>SubItem1</li> <li>SubItem2</li> </ul> </li> </ul>
What is a client?
A device that receives network information or services.
What is a server?
A host that provides information or a service to other devices on the network. For example, a print server is a network host that provides printing services and a file server is a host that provides storage space for saving and retrieving files.
What is a hyperlink?
A link within a hypertext document that can be activated to access a data source.
What is a description list and what is the general structure?
A list of terms and matching descriptions. <dl> <dt>term1</dt> <dd<description1</dd> <dt>term2</dt> <dd<description2</dd> ... </dl>
What does LAN stand for and what is it?
A local area network is a network confined to a small geographic area, such as within a building or department.
What is a markup language?
A markup language is a language that describes the content and structure of a document by "marking up", or tagging, different elements in the document and connects documents through hypertext links.
What is hypertext?
A method of organization in which data sources are interconnected through a series of links or hyperlinks that users activate to jump from one data source to another.
What is a node?
A network location that can access and share information and services.
What is an absolute path?
A path that starts fgrom the root folder and processes down the entire folder structure described with the expression. /folder1/folder2/folder3/file folder1 is the root file, folder2/3 are subfolders, and file is the file name.
What are validators and what is one popular option?
A program that tests code to ensure that it contains no syntax errors. A popular option is the W3C validation website (validator.w3.org)
What is a style sheet?
A set of rules specifying how page elements are displayed. Style sheets are written in the Cascading Style Sheets (CSS) language.
What is a network?
A structure in which information and services are shared among devices known as nodes or hosts.
What is CSS?
A style sheet language supported by the W3C and used in web page design. Like HTML, the CSS language was developed and enhanced as the web grew and changed and, like HTML, CSS specifications are managed by the W3C.
What are web servers? What are web pages?
A web server is a server that makes web pages accessible to the network. A web page is a document stored by a web server and accessed by a web browser. It is a simple text file written in HTML.
What does WAN stand for and what is it?
A wide area network is a network that covers a wide area, such as several buildings or cities. Wide area networks typically consist of two or more interconnected local area networks. The largest WAN in existence is the Internet, which incorporates an almost uncountable number of networks and hosts involving computers, mobile devices (such as phones, tablets, and so forth), MP3 players, and gaming systems.
What is a conditional comment?
An Internet Explorer extension that encloses content that should only be run by particular versions of Internet Explorer. <!--
What are nested elements?
An element contained within another element. <p> Welcome to <em>Curbside Thai</em>.</p>
What is an inline element?
An element in which the content is placed in line with surrounding page content rather than starting on a new line. Unlike sectioning or grouping elements that start content on a new line and mark a self-contained block of content, text-level elements appear in line with the surrounding content.
What is an empty element?
An element that is either nontextual or contains directives to the browser about how the page should be treated. ie; <br />
What is a grouping element?
An element that organizes similar content into a distinct group, much like a paragraph groups sentences that share a common theme.
What is a sectioning element? Name 4 examples (9 total).
An element used to define major topical areas in the document. address ... article ... aside ... body ... footer ... h1/h2/h3/etc ... header ... nav ... section
What is a text-level element?
An element within a grouping element that contains strings of the characters or page content.
What are whitespace characters?
An empty or blank character such as a space, tab, or line break.
What is script?
An external program that is run within the browser. One script that provides support for HTML5 is Modernizr (http://modernizr.com); another is HTML5 Shiv (https://github.com/aFarkas/html5shiv). Many HTML editors, such as Dreamweaver, supply their own script files to cope with legacy browsers. Note that even with these scripts, the rendering of your page under old browsers might not match current browsers.
What is quirks mode?
An operating mode in which the browser renders the web page based on styles and practices from the 1990s and early 2000s. This typically occurs when an HTML document does not have a doctype.
What is standards mode?
An operating mode in which the browser renders the web page in line with the most current HTML specifications. This occurs when an HTML document does have a doctype.
What is a host?
Any device that is capable of sending and/or receiving data electronically. The most common hosts that you will work with are desktop computers, laptops, tablets, mobile phones, and printers.
In... <br /> ... why is it a good idea to use the slash when you don't need it in HTML5?
Because XHTML documents, as well as other markup languages, require the use of a /, so it would be good practice to use it just in case you ever code in the other markup languages.
Why is the rel attribute required when linking an HTML document to a CSS style sheet file?
Because the link element can also be used to link to data other than style sheets, the rel attribute is required to tell the browser that it is linking to style sheet data. Note that older browsers might include type="text/css" as part of the link href element.
What would you put in to link to a file that is located in the parent folder?
By using .. ../filename.html
How do you link your HTML file to a style sheet file?
By using the link element. <link href="filename" rel="stylesheet" /> filename is the text file containing the CSS style sheet.
What is embedded content?
Content imported from another resource, often nontextual, such as graphic images, audio soundtracks, video clips, or interactive games. To support this type of content, HTML provides embedded elements
What is metadata?
Content that describes the document or provides information about how the document should be processed by the browser.
What is attribute minimization? What is an example?
Element attributes that do not require an attribute value, such as the hidden attribute. ie; <p hidden>Placeholder Text</p>
T/F - HTML5 is not compatible with earlier versions of HTML.
False - HTML5 is compatible with earlier versions of HTML.
T/F - The W3C has enough enforcement power to force everyone to follow their guidelines.
False - they have no enforcement power, but, because using a uniform language is in everyone's best interest, the W3C's recommendations are usually followed, though not always immediately.
What does HTML stand for and what is it?
Hypertext Markup Language is a markup language for creating websites. It supports the tagging of distinct document elements and connecting documents through hypertext links.
What happens if you do not specify the width or height of an image? What happens if you specify the width, but nbot the height?
If neither are specified, the original size will be used. If the width is specified but the height is not, the browser will automatically set the height to maintain the proportions of the image; similarly, if you define the height, browsers automatically set the width to maintain the image proportions. Image sizes can also be set within the document's style sheet.
What does the br element do and how do you use it in HTML?
Inserts a line break. <br> or <br /> - the / is required in XHTML documents as well as other markup languages.
What is the difference between the following three pieces of code?: <p>Welcome to <em>Curbside Thai</em.</p> <p> Welcome to <em>Curbside Thai</em. </p> <p> Welcome to <em>Curbside Thai</em. </p>
Nothing. When the browser reads an HTML file, it ignores the presence of white-space characters between element tags and makes no distinction between spaces, tabs, or line breaks. The browser reads these three pieces of code the exact same way.
What is a problem with using div elements compared to using sectioning elements?
One problem with div elements is that there are no rules for the ids. One web designer might identify the page heading with the id header while another designer might use heading or top. The lack of consistency makes it harder for search engines to identify the page's main topics. The advantage of the HTML5 sectioning elements is that their tag name indicates their purpose in the document, leading to greater uniformity in how pages are designed and interpreted.
In an ordered list, what does ol and li stand for?
Ordered List List Item
What is an ordered lists and what is the general structure?
Ordered lists are used for items that follow some defined sequential order, such as items arranged alphabetically or numerically. An ordered list is marked using the ol (ordered list) element with each list item marked using the li element. <ol> <li>item1</li> <li>item2</li> ... </ol>
What is another word for a sectioning element and what is it?
Semantic Elements - An element in which the element name describes the purpose of the element and the type of content it contains.
What are some examples of an HTML text editor? What about IDEs?
Some of the more popular HTML editors are Notepad++ (notepad-plus-plus.org), UltraEdit (www.ultraedit.com), CoffeeCup (www.coffeecup.com), BBEdit (www.barebones.com) and ConTEXT (www.contexteditor.org). Some of the popular IDEs for web development include Adobe Dreamweaver (www.adobe.com), Aptana Studio (www.aptana.com), NetBeans IDE (netbeans.org) and Komodo IDE (komodoide.com).
What does XHTML stand for and what is it?
The Extensible Hypertext Markup Language is a version of HTML in which syntax standards are strictly enforced.
What does the WHATWG stand for, why were they put together, and what did they do?
The Web Hypertext Application Technology Working Group was formed in 2004 as a rebellion against the development of XHTML in order to develop a rival version of XHTML called HTML5.
What does the W3C stand for and what are they?
The World Wide Web Consortium is a group of web designers and programmers that set the standards or specifications for browser manufacturers to follow.
What is an element tag?
The fundamental building block of an HTML file, used to mark every document element. ie, in <p>, p is the element. **From my understanding, this is similar to Java/Python keywords.
What do the <html>, <head>, and <body> tags do?
The html element marks the entire document. Within the html element is the head element used to mark information about the document itself. The body element is used to mark the content that will appear in the web page.
*** FUN FACT ***
The need for conditional comments arose because Internet Explorer significantly differed from other browsers in how it implemented HTML and there was a need to separate the code meant for the IE browser from code meant for other browsers. This is not as much of a problem with recent versions of Internet Explorer, but you may still need to use conditional comments if you are writing code that will be compatible with versions of Internet Explorer earlier than IE 8.
What is an element attribute?
The part of an element that provides information to the browser about the purpose of the element or how the element should be handled by the browser. ie; <p id="intro">Welcome to Curbside Thai.</p>
What is character encoding? What is the most common type?
The process by which the computer converts text into a sequence of bytes and then converts those bytes back into characters. The most common character encoding in use is UTF-8, which supports almost all of the characters you will need.
What is syntax?
The rules governing how a language should be used and interpreted.
Who was the first to develop hypertext by creating a system of hypertext documents? Why did they create this?
The solution to this problem was developed in 1989 by Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland. They needed an information system that would make it easy for their researchers to locate and share data on the CERN network. To meet this need, they developed a system of hypertext documents.
What is a starting and ending tag?
The tag that marks the start/end of the element content. ie, <p> is a starting tag while </p> is an ending tag.
What is the most extended character set?
Unicode with up to 65,536 symbols and can be used with any of the world's languages. *** More Facts: *** The character set used for the English alphabet is the American Standard Code for Information Interchange more simply known as ASCII. A more extended character set, called Latin-1 or the ISO 8859-1 character set, supports 255 characters and can be used by most languages that employ the Latin alphabet, including English, French, Spanish, and Italian.
What is an unordered list and what is it's general structure?
Unordered lists are used for lists in which the items have no sequential order (next to a marker, such as a bullet point - depends on style sheet). <ul> <li>item1</li> <li>item2</li> ... </ul>
To create links between files in separate folders, you must provide a path to the linked file. HTML supports two kinds of paths: ______________
absolute and relative
Embedded elements are also known as interactive elements because they __________________. For example, embedded audio or video content usually contains player buttons to control the playback.
allow for interaction between the user and the embedded object.
Another way to insert a special symbol is to use a _______________, which is a short memorable name used in place of the encoding reference number.
character entity reference &char; where char is the character's entity reference. © displays the copyright symbol.
HTML does not describe the document's appearance, it only describes the document's ______________.
content and structure
Prior to HTML5, sections were defined as divisions created using the _____ element.
div
Each character from a character set is associated with an ___________ that can then be stored and read by a computer program.
encoding value
In order to enable users to jump to a specific location within a document, you need to identify that location by adding a ___ attribute to an element tag at that location
id ie; <h2 id="lunch">Lunch Menu</h2>
HTML does not specify a set of values for the name attribute, but commonly used names include _______________________. Hint: there are four
keywords, description, author, viewport
What are the 5 logical operators?
lt - less then lte - less than or equal to gt - greater than gte - greater than or equal to ! - not
HTML supports three types of lists: __________________________
ordered lists, unordered lists, and description lists.
When many folders and subfolders are involved, absolute path expression can quickly become long and cumbersome to work with. For this reason, most web designers prefer __________ paths in which the path is expressed ______________ to the location of the current document. HINT: Same word
relative ** MORE INFO: ** If the current document and linked file are in the same folder, there is no path and you need only include the filename. If the linked file is in a subfolder of the current document, the path includes all of the subfolder names starting from the location of the current page using the expression "folder1/folder2/folder3/file" where folder1, folder2, folder3, and so forth are subfolders of the current document.
To display different numbering, you use the __________ and __________ attributes of the ol element.
start ; reversed The start attribute provides the numeric value for the first item in the list, while the reversed attribute specifies that the list numbers should be displayed in descending order. <ol reversed start="50"> starts a list at 50 and descends from there (49, 48, etc)
Because an HTML file is a text file, it is composed only of __________________________.
text characters and whitespace characters.
To recommend a different line break point, use the _________ element to indicate where a line break should occur if needed.
wbr (word break)
