HTML5
create a link to an anchor called top of another page called about.html
..... <p><a href="about.html#top"> Returned to the top of About page</p> ......
create a link to an anchor called top
...<a name="top"</a>..... ..... <p><a href="#top"> Returned to the top of page</p>
explain the rules of cascading order in stylesheets
1: inline styles takes first precedence 2: internal styles takes second precedence 3: external styles take final precedence
write a comment in HTML
<!-- This is an HTML comment! -->
what's the syntax for writing comments in HTML?
<!--This is just a comment -->
write a webpage displaying a list containing: "Mark Burleigh" and "CIT"
<!DOCTYPE html> <html> <body> <ul> <li>Mark Burleigh</li> <li>CIT</li> </ul> </body> </html>
Create a webpage that displays: hello world
<!doctype html> <html> <head> <title> first webpage</title> <body>Hello World</body> </html>
provide a HTML link to CIT website
<a href="http://www.cit.ie"> CIT </a>
First change the link address to https://www.airbnb.com/locations Then change the link text to "Learn More." <a href=""> </a>
<a href="https://www.airbnb.com/locations">Learn More. </a>
write a hyperlink in HTML to CIT website
<a href="www.cit.ie">Click HERE for CIT Info</a>
_________ is used to contain biographical information, related links and upcoming events
<aside>
what element/tag frames the content of the page to be displayed in the browser window?
<body>
give the tag to add a line break
<br>
write a HTML element containing a class called header
<div class="header"> <h2>Heading</h2> <p>Subtitle</p> </div>
______ is used to hold generic sections of content primarily for the purpose of applying styles.
<div>
__________ is used to contain contact information and copyright data
<footer>
write HTML code for the following using HTML checkboxes: Please choose your hobbies: o Swimming o Boxing
<form> Please choose your hobbies: <input type="checkbox" name="hobbyVar" value="swimming">Swimming<br> <input type="checkbox" name="hobbyVar" value="boxing">Boxing<br> </form>
Write HTML code for the following that accepts only even hours whose maximum hours 12 and whose minimum is 0. The starting value is 8: Please enter delivery time: ___
<form> Please enter delivery time: <input type="number" min="0" max="12" step="2" value="8"> </form>
write HTML code for the following form: Please enter your first name:_____________ Please enter your last name:_____________
<form> Please enter your first name:<input name="fn"><br> Please enter your last name:<input name="ln"> </form>
write HTML code for the following including a text area: Please give us feedback:|---type comments here--|
<form> Please give us feedback: <textarea name="commentsVar" cols="30" rows="5">type comments here</textarea> </form>
write HTML code for the following using HTML radio button: Please select means of contact: o mail o Phone
<form> Please select means of contact: <input type="radio" name="contactVar" value="email">Email<br> <input type="radio" name="contactVar" value="phone">Phone<br> </form>
write HTML code for the following: ______________________________ Search website here: |Enter search terms here...| |_____________________________|
<form> Search website here: <input type="search" name="searchVar" placeholder="Enter search terms here..."> </form>
write HTML for the following: Email:[____] Website:[____] Phone:[____]
<form> Email: <input name="emailVar" type="email"> Website: <input name="websiteVar" type="url"> Phone: <input name="phoneVar" type="tel"> </form>
write HTML for the following: Please enter a number between 0 and 10:[____]
<form> Please enter a number between 0 and 10: <input type="number" min="0" max="10" value="0"> </form>
write HTML for the following: Please enter your feedback here:[____]<--Text area
<form> Please enter your feedback here:<br> <textarea name="feedback" cols="30" rows="20"> Type your feedback here </textarea> </form>
write HTML for the following: Please specify your appointment time:[____]
<form> Please specify your appointment time: <input type="time"> </form>
create a main heading called "find a place to stay.":
<h1>Find a place to stay.</h1>
Below the h1 element, add a p element that says: Room Rentals. <h1>Find a place to stay.</h1>
<h1>Find a place to stay.</h1> <p>Room Rentals.</p>
Insert an external CSS style sheet into a html webpage
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
______ used to hold aspects like title, subtitle, navigation
<header>
HTML pages need to have 4 tags. List them
<html>, <head>, <title> and <body>
add an image to HTML
<img src="https://goo.gl/Lva9p1">
insert an image called photo.jpg into HTML was width is 391 and height is 274
<img src="photo.jpg" width="391" height=" 274">
embed C:\myFolder\mark.jpg into website
<img src=' C:\myFolder\mark.jpg'/>
give the tag to create a list of items
<li>
_____ is used to hold important navigational elements
<nav>
write HTML code to display the following list: 1. Raspberries 2. Strawberries 3. Apples
<ol> <li>Raspberries</li> <li> Strawberries</li> <li> Apples</li> </ol>
give an example of indenting a paragraph 25px
<p style = "text-indent: 25px> Hello world </p> or p {text-indent: 25px; }
Set the font size 12 pt in the following paragraph: <p> Hello</p> inline
<p style="font:size: 12pt;"> Hello</p>
give the tag to create paragraphs
<p>
break a line into two separate pieces
<p> Some text <br> that spans two lines </p>
how do you make text bold in HTML?
<p><b>Student Number:</b>R0001234</p> where to text "student number:" will be bold
how do you make text italic in HTML?
<p><em>Hello</em>World</p> where to text "Hello" will be bold
use HTML to quote the following "to be or not to be"
<p>The following is Hamlet:<blockquote>to be or not to be<blockquote></p>
_____ is used to group related content such as chapters in the book together
<section>
name seven container elements in HTML
<section>, <header>,<footer>,<aside>,<nav>,<div>,<article>
CHECKcreate a table with headings item-price and with Banana $12.30, yogurt $12.99
<table> <thead> <tr> <th>Item</th> <th>Price</th> </tr> </thead> </body> <tbody> <tr> <td>Banana</td> <td>$56.75</td> </tr> <tr> <td>Yogurt</td> <td>$12.99</td> </tr> </tbody>
what element gives the name of the page that would appear at the top of the browser and also be listed in search engines?
<title>
write HTML code to display the following list: Raspberries Strawberries Apples
<ul> <li>Raspberries</li> <li> Strawberries</li> <li> Apples</li> </ul>
write HTML to include video .mp4 into webpage that is preloaded. width 300 and height 200
<video src= "video.mp4" width="300" height="200" controls preload ></video>
A HTML ______ is used to tell the browser how to display content on a page.
A HTML ELEMENT is used to tell the browser how to display content on a page.
A ___element groups other elements together into sections of the web page, such as a navigation bar, the main body, and the footer.
A div element groups other elements together into sections of the web page, such as a navigation bar, the main body, and the footer.
A _____is a useful way to create page layouts
A grid is a useful way to create page layouts
A subtitle using a ___ element.
A subtitle using a p element.
what is a child element in HTML?
An element that is an immediate descendent of another element or nested within another element is called a child e.g. <ul id="parent"> <li id="child">I'm a child of parent!</li> </ul>
CSS is used to ______the _____and _____of the page
CSS is used to control the design and layout of the page
Whats a div element?
Div Element(s) The <div> tag is nothing more than a Container Unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.
Everything inside a web page is nested inside the ___ element
Everything inside a web page is nested inside the html element
explain the <head> tag
FRAMES the IDENTIFICATION information for the page, such as title, transferred to SEARCH ENGINE
A div element changes the appearance of webpage. True or false
False. A div element groups other elements together into sections of the web page, such as a navigation bar, the main body, and the footer.
The external style sheet file can contain html tags.
False: The file should not contain any html tags.
true or false HTML 5 is case sensitive
False: it is case insensitive e.g. <HTML> and <html> Are acceptable
Explain <section> tag
GROUPS thematically related content such as CHAPTERS in a book
HTML displays of the ______ of the page. A stylesheet specifies the ________ of that _____
HTML displays of the CONTENT of the page. A stylesheet specifies the PRESENTATION of that CONTENT
HTML elements are the _____ ______ of web pages.
HTML elements are the building blocks of web pages.
HTML is used to establish a ____ ______. It also lets us add ___, ____ and _____.
HTML is used to establish a page's structure. It also lets us add text, links and images.
Headings are described by _____ _______
Headings are described by heading elements
In HTML, a bulleted list is described using a ____element.
In HTML, a bulleted list is described using a ul element.
In HTML, a bulleted list is described using a ___element. Each item in the list is placed inside an ___ element.
In HTML, a bulleted list is described using a ul element. Each item in the list is placed inside an li element.
In HTML, paragraphs are described by paragraph elements, or __elements.
In HTML, paragraphs are described by paragraph elements, or p elements.
what is a href?
Links tell the browser where to go using an href attribute, which stores a URL.
______ refers to the process of containing one HTML tag inside another
NESTING refers to the process of containing one HTML tag inside another
explain the doctype tag
TELL the BROWSER which type of CODING or SCRIPTING language is used in the document
The <a> tag defines a _______,
The <a> tag defines a hyperlink,
The ___ element contains the actual content of the web page - everything nested inside
The body element contains the actual content of the web page - everything nested inside
what is HTML body?
The body is the container for all of a page's content. e.g <html> <head> <title>An example of the body tag</title> </head> <body> This is inside the body! </body> </html>
The ____ at the start of the HTML file tells the browser which version of HTML you are using.
The doctype at the start of the HTML file tells the browser which version of HTML you are using.
The _____ at the start of the HTML file tells the browser which version of HTML you are using.
The doctype at the start of the HTML file tells the browser which version of HTML you are using.
The ___ element is used to describe the main heading of the page.
The h1 element is used to describe the main heading of the page.
The ____ element is used to describe the main heading of the page.
The h1 element is used to describe the main heading of the page.
Explain the following: <div class="nav"> <div class="container"> <ul> <li>Your Name</li> </ul> <ul> <li>Sign Up</li> </ul> </div> </div>
The outer <div class="nav">..</div> groups the elements into the navigation bar section of the web page. The inner <div class="container">..</div> wraps the contents in a container.
There are ___levels of heading elements: ___to __.
There are six levels of heading elements: h1 to h6.
divide two sentences with a straight line in HTML
This text is divided <hr> ...from this text!
Everything nested inside <body> and </body> shows up in the web browser. False?
True
The style sheet file must be saved with a .css extension.
True
Use a class when you want to consistently style ______ ______ throughout the page/site.
Use a class when you want to consistently style MULTIPLE ELEMENTS throughout the page/site.
Use the ID when you have a _______ ______ on the page that will take the style.
Use the ID when you have a SINGLE ELEMENT on the page that will take the style. ID must be unique.
Explain <footer> tag
Used to hold information such as CONTACT INFORMATION and COPYRIGHT data
Explain <header> tag
Used to hold the header HOLD of a SECTION or document such as TITLE, SUBTITLE, TAGLINE and NAVIGATION
<a href="../../About.htm"> About</a>
a link to another webpage. The webpage is two levels above in the directory ../../ that means you go back to directories
absolute links are those that include the _____ pathname. It must include the _____at the beginning of the link e.g ______
absolute links are those that include the ENTIRE pathname. It must include the PROTOCOL at the beginning of the link e.g <a href="http://www.cit.ie"> CIT </a>
what are attributes?
additional aspects of the tag/element e.g. <img src="picture.jpg" width="100" height="100" > where src, width and height are the attributes of an element
since the background color of the body element to white
body {background-color: white;}
when conflicting levels of importance might prevent a particular desirable style from being used you can...
declare one style the more IMPORTANT than another e.g. p {color: blue; !Important}
href attribute which equals the ____you want to link to.
href attribute which equals the website you want to link to.
if you want to style multiple sections the same you would apply the ________
if you want to style multiple sections the same you would apply the CLASS e.g. <section class="Chapter1"> Chapter 1 goes here</section>
opening and closing tags tell the browser when to start and stop applying _______
opening and closing TAGS tell the browser when to start and stop applying _______
create an ordered list of apples, pears, bananas
ordered list will output a number or letter form <ol> <li>Apples</li> <li>Pears</li> <li>Bananas</li> </ol>
use HTML to center a paragraph
p {text-align: center; } or <p style="text-align: center;"> Hello.......</p>
create an unordered list of apples, pears, bananas in HTML
unordered list will output in BULLETS form <ul> <li>Apples</li> <li>Pears</li> <li>Bananas</li> </ul>
