HTML
Create a table with a solid black border that collapses
(CSS) table, th, td { border: 1px solid black; border-collapse: collapse; }
Create a table with a solid black border
(CSS) table, th, td { border: 1px solid black; }
alpha parameter Is applicable to HSL and RGB values where
0 is full transparency and 1 is all solid
Show an html comment
<!-- Write your comments here -->
Conditional Comments
<!--[if IE 9]> .... some HTML here .... <![endif]--> IE, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
The lang Attribute (The language is declared with the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines:)
<!DOCTYPE html> <html lang="en-US"> <body>
Create A Simple HTML Document
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Try it Yourself »
Local Links "What does that mean?"
<a href="html_images.asp">HTML Images</a> it uses a folder in the same website.
In HTML, links are defined with the <a> tag
<a href="url">link text</a>
HTML links are defined with the <a> tag:
<a> </a>
The HTML <address> element defines contact information (author/owner) of a document or an article.
<address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
<bdo> for Bi-Directional Override
<bdo dir="rtl">This text will be written from right to left</bdo> Try it Yourself »
You can set the background color for HTML elements: such as <p> and <h1> tags
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Border Color You can set the color of borders of tags (show an example with a couple of tags)
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Inline CSS
<h1 style="color:blue;">This is a Blue Heading</h1>
The color property defines the text color for an HTML element
<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
The font-family property defines the font to be used for an HTML element
<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>
The text-align property defines the horizontal text alignment for an HTML element
<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>
HTML bookmarks (You've done this shit)
<h2 id="C4">Chapter 4</h2> <a href="#C4">Jump to Chapter 4</a> Or you can jump from another page in the same website <a href="html_demo.html#C4">Jump to Chapter 4</a>
Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element:
<head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>
Html background image (how do you do it?) (also try it on a p element)
<html> <body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> <p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p> </body> </html> (note that it is added in the body tag)
External CSS An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! To use an external style sheet, add a link to it in the <head> section of the HTML page:
<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body>
Images in Another Folder If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
You can use the style attribute to specify the width and height of an image or Alternatively, you can use the width and height attributes (Show both examples)
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;"> <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
img tag
<img src="pulpitrock.jpg" alt="Mountain View">
HTML images are defined with the <img> tag.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> Try it Yourself »
Image Maps Use the <map> tag to define an image-map. An image-map is an image with clickable areas. (Find a damn picture create some image map)
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>
External References External style sheets can be referenced with a full URL or with a path relative to the current web page. This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Create a basic ordered list
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
The id Attribute (How can it be used?)
<p id="p01">I am different</p> #p01 { color: blue; }
The title Attribute (what does it do?)
<p title="I'm a tooltip"> This is a paragraph. </p> Try it Yourself » (has a little sign that pops up whenever you hover over it)
Double quotes around attribute values are the most common in HTML, but single quotes can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
HTML paragraphs are defined with the <p> tag:
<p> </p>
HTML <cite>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Image Floating Use the CSS float property to let the image float to the right or to the left of a text: (float and image with a p element)
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p> *Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.*
The HTML <blockquote> element (create one and also cite it)
<p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
The HTML <abbr>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
The HTML <q> element defines
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<picture> Element (add multiple pictures with width restrictions to see what happens)
<picture> <source media="(min-width: 650px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH3G6sQwJjS9STQck_WcCT5Vlo3Jx9gGaRdGUHqiUWs7J6J1y0"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
The HTML <pre> element defines preformatted text
<pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre>
You can style anchor tags
<style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style>
The class Attribute To define a style for a special type of elements, add a class attribute to the element
<style> p.error { color: red; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p class="error">I am different.</p> <p>This is a paragraph.</p> <p class="error">I am different too.</p> </body>
Do some advance styling for with the table
<style> table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: black; color: white; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <br> <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body>
Create a table with some extra padding (HTML)
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } </style> </head> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
A caption tag is like a title for a table
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html>
Create an HTML table with extra-border spacing
<style> table, th, td { border: 1px solid black; padding: 5px; } table { border-spacing: 15px; } </style>
HTML Table - Cells that Span Many Rows
<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
HTML Table - Cells that Span Many Columns (do a heading that spans 2)
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> Try it Yourself »
The HTML style attribute has the following syntax
<tagname style="property:value;">
Create a basic ordered list.
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<b>
Defines bold text
<del>
Defines deleted text
<em>
Defines emphasized text
<strong>
Defines important text
<ins>
Defines inserted text (underlines it)
<i>
Defines italic text
<mark>
Defines marked/highlighted text
<small>
Defines smaller text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
HTML Links - Image as Link (play around with some styling experiment)
Done
Nested HTML Lists List can be nested (lists inside lists)
Done
A Special Style for One Table To define a special style for a special table, add an id attribute to the table Create 2 tables one with an id atribute
Done table#t01 { width: 100%; background-color: #f1f1c1; }
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
External Paths (wtf is this??)
External pages can be referenced with a full URL or with a path relative to the current web page. This example uses a full URL to link to a web page: <a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
In HTML, a color can be specified using a hexadecimal value in the form
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00)
Empty HTML Elements (Show exception to when one should be closed)
HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br />. HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
HSL Value ( show an example)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white hsl(0, 100%, 50%)
What does HTML stand for?
Hyper Text Markup Language
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the External - by using an external CSS file
<hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
It's a damn line break
In HTML, colors can also be specified using (what are they?)
RGB values, HEX values, HSL values, RGBA values, and HSLA values: (where A standts for alpha)
HTML Description Lists (an example of a description list)
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. The <head> element is placed between the <html> tag and the <body> tag: <!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body>
CSS Border (Create one around a <p>)
The CSS border property defines a border around an HTML element p { border: 1px solid powderblue; }
CSS Fonts (show three properties and examples)
The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.
CSS Margin
The CSS margin property defines a margin (space) outside the border
CSS Padding (what is it and show an example)
The CSS padding property defines a padding (space) between the text and the border p { border: 1px solid powderblue; padding: 30px; }
style attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.
HTML Links - The target Attribute (show all of them)
The target attribute specifies where to open the linked document. The target attribute can have one of the following values: 1 _blank - Opens the linked document in a new window or tab 2 _self - Opens the linked document in the same window/tab as it was clicked (this is default) 3 _parent - Opens the linked document in the parent frame 3 _top - Opens the linked document in the full body of the window 4 framename - Opens the linked document in a named frame
What is the caveat about height and width attributes
The width and height attributes always defines the width and height of the image in pixels.
When all RGB values are equal, you will get
a shade of gray
<body> element
contains the visible page content
<!DOCTYPE html>
declaration defines this document to be HTML5
<br>
defines a line break.
Unordered lists have style types What are they and use examples of them all?
disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked <ul style="list-style-type:disc"> <ul style="list-style-type:circle"> <ul style="list-style-type:square"> <ul style="list-style-type:none">
HTML headings are defined with the <h1> to <h6> tags.
done
create a navigation bar without bootstrap
done
In css if you put a tag like p before a #
it will only specify to <p>
Learn more about image mapping coordinates
okay broski
Explain the difference between padding and margin
padding is on the inside and border is on the outside
RGB Value In HTML, a color can be specified as an RGB value, using this formula: (code out some random colors) RGB
rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0). To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).
How to View HTML Source?
right click and click view source
<title> element
specifies a title for the document
Certain tags have attributes like the <img> has
src height width and alt attributes.
<h1> heading tags
start from 1 to 6. But you can always adjust the size
Create a table with the heading text left-align
th { text-align: left}
The <html> element is
the root element of an HTML page
There are type for ordered lists. Name all of them. (code examples)
type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers