3 Column Float Layout
Here’s the HTML for a basic page with a header, a left column, a right column, a center content space and a footer. Comments are in gray. <html> <body> <!–Header image -> <img id=”header” src=”images/WebsiteHeader.png”> <!– div for first column–> <div class=“cols”> <h2>Column 1</h2> <p> Text for column 1</p> </div> <!–div for the second column…
Read More2 Column Float Layout
If we wanted to make a web page that had: Header across the top 2 equal columns of content Footer across bottom. How? Create the header Create the two columns of text…float one..left and one…right! Then for the footer….Clear the floats! Here’s the HTML for a basic page with a header, a left column, a…
Read MoreExample with Semantic Elements
Finally, let’s see a real example. If you put together this HTML… <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”css/five.css”></link> </head> <body> <header>Steve Jobs Lives</header> <nav> <a href=”five”>Home</a><a href=”#”>About Us</a><a href=”#”>Contact</a></nav> <main> <section>Because…really he just can’t be gone. Who is going to invent the great next invention? While Apple is still producing…
Read MorePossible Layouts
Or, how would you use these to create a standard web page. Here is one example using some of these standard elements: This example adds in multiple elements like headers and sections to demonstrate a more complex structure:
Read MoreSemantic Element List
Here are the main semantic elements: Element Description <article> for complete or self-contained items like a blog post, newspaper article or forum post
Read MoreHomework: Numbers
Create a file called numbers.html for Part 1. Here’s a formula you will need to figure out the area of a trapezoid.
Read MoreHomework: JavaScript Input
Woohoo! JavaScript. Let’s just start off small this week. Do the following:
Read MoreFlexbox Container Properties: flex-wrap
Flexbox Properties Here are the properties you can apply to affect the layout of your page. flex-direction: defines direction( horizontal or vertical) container stacks items justify-content: aligns items horizontally align-items: aligns items vertically flex-wrap: specifies whether items should wrap or not flex-flow: shorthand combines flex-direction and flex-wrap This is the basic HTML we will be…
Read MoreFlexbox Container Properties: align-items
Flexbox Properties Here are the properties you can apply to affect the layout of your page. flex-direction: defines direction( horizontal or vertical) container stacks items justify-content: aligns items horizontally align-items: aligns items vertically flex-wrap: specifies whether items should wrap or not flex-flow: shorthand combines flex-direction and flex-wrap This is the basic HTML we will be…
Read MoreFlexbox Container Properties: flex-direction
Flexbox Properties Here are the properties you can apply to affect the layout of your page. flex-direction: defines direction( horizontal or vertical) container stacks items justify-content: aligns items horizontally align-items: aligns items vertically flex-wrap: specifies whether items should wrap or not flex-flow: shorthand combines flex-direction and flex-wrap This is the basic HTML we will be…
Read More