HTML & CSS : Level 2
Build on the skills learned in HTML and CSS: Level 1 to develop more advanced web pages. You'll explore additional features for creating web pages, including creating and modifying tables; setting up forms; adding multimedia; validating code and publishing your site. You will learn to apply advanced CSS techniques to enhance the appearance and usability of your website. At the end of this class you will be able to create and style more advanced web pages.
Course objectives
- Create advanced page layouts.
- Move elements around on a page using the position property.
- Create horizontal and vertical navigation bars.
- Create a table to organize and present data within a web page.
- Create a form to gather user information for processing.
- Embed objects to enhance a web page.
- Apply techniques to effectively build web pages.
- Validate and publish a website.
First Session
A quick recap of HTML & CSS Level 1.
- Browsers
- Structure and content of a web page
- My "favorite tags"
- Inline vs block
- The power of CSS
- The Box Model
- Basic layout and floats
- "Clear" and "overflow" property
- Exporting styles
Here is my lake image!
Here is my logo
Here are my social media icons
Second Session
Working on our index.html!
- Exporting styles
- Adding elements to "boxes"
- Changing our layout (boxes)
- Using the position property
- Creating our second page
- Secondary nav "buttons"
- Playing with position!
Our images!
Third Session
Creating your third page (our ABOUT page)
- Always remember.... File... save as!
Fourth Session
Faux Columns and more!
Learning by troubleshooting... sometimes frustrating, but when we finally find the answer... !!!
Answer
Overflow:hidden! Since both our containers were floating, the area did not exist for the background color to display. Once adding overflow hidden to our wrapper, Viola!!!
Reviewing our sub nav based on hover!
Here is the recording link for our menu based on hover!
Playing with Font Awesome
Font Awesome allows you to use their icons as typography vs images (ie facebook, twitter and instagram). Here are the steps:
- Download Font Awesome
- Here is their Cheat Sheet
- Link their css to your page
- Apply their <i class="fa fa-facebook-square fa-3x"></i>
Fifth Session
Playing with Tables
Additional!!!
Browser Compatibility
Max width and Internet Explorer!
Love our max-width property! Use it in websites, usually for my images to fit nicely in their containers!!! In tables, max-width for images work nicely, except in Internet Explorer.
Time to "google search: max-width tables not working in IE."
Found it!
Here is the CSS - Please note the new property:
table-layout:fixed;
and, the width of our image is 100%!
Sixth Session
HTML Form
Student Examples of placing their form in a website
Final Classwork
A working form
We will create a working form in a blank html page, using the following form elements:
- Form
- Fieldset
- Input tags
- Type - text
- Type - email
- Type - submit
- Radio buttons
- Checkbox
- Select
And most importantly, we will need a formhandler
And access to my server via FTP (Cyberduck or Filezilla or WinSCP
- (host name/server name)ftp.ipage.com
- (username) bellevue
- (pw) Will share in class!
Video Recordings
Video Tag
A great explanation of the three media types
<video controls>
<source src="video/beethoven.mp4" type="video/mp4">
<source src="video/beethoven.ogv" type="video/ogv">
Your browser does not support the video tag.
</video>
Audio
<audio controls>
<source src="audio/terminator.ogg" type="audio/ogg">
<source src="audio/terminator.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>