In this HTML And CSS Tutorial you’ll build a multi-column web page from start to finish, covering all of the HTML and CSS that you'll need to start building a site. This course covers topics ranging from creating a layout using divs to creating and styling forms. After going through this course, you'll not only be learning HTML And CSS to be able to build a website, you'll be ready to begin integrating new functionality and features, all of which require you to know these essential basics.
This introductory section is intended to describe what HTML and CSS can do, discuss HTML page structure and also where you can create and test your HTML and CSS.
In this section, we’ll discuss what a doctype is and which to use, cover the basic syntax of HTML tags, and create and discuss what goes in theand sections of the page.
Discover the different places where CSS styles live (internal vs. external), create a stylesheet and link that style sheet to your page.
This section is intended to give an overview of the three types of styles that you can use on the web: classes, tags, and IDs.
You will learn the basic structure of a style and create your first tag styles that every site begins with.
In this very important section, you will learn how we create multi-column layouts in a web page using DIV tags and CSS. This is a great introduction to these concepts and will make it easier if you decide later to learn more about HTML5 and it's semantic tags.
Lots of sites today use DIV tags and CSS to create the main structure of a page. In this section, you will insert a series of DIVs and create styles for each of them to lay the groundwork for your multi-column layout.
You will learn one of the more widely used methods of turning DIVs into columns using the float property. You'll also learn how float actually works so that you can use it throughout your pages.
The "Box Model" is an important concept to understand when laying out your pages using CSS.
Inserting text and adding HTML markup like paragraph and heading tags, for instance, are important for creating content hierarchy in your pages. In this section, you will insert HTML tags to begin styling your text.
In this section you will begin to create CSS styles to modify the appearance of the HTML tags, as well as create other types of styles to apply to your text in different ways.
Learn the HTML necessary to insert images and apply attributes to those images.
After inserting images, you are eventually going to want to wrap text around them, add a border, push text away, and more. In this section, you will create class styles to apply styling to the image.
Adding CSS formatting to the backgrounds of objects can be a great way to add design depth to your pages. In this section, you will explore adding and editing the properties for a background image as well as working with background colors.
In this short section, you will learn about an important concept called clear to help battle a problem we all face with floated elements.
There are many ways to create a multi-column layout. In this section, I want to introduce the position property and discuss the different methods for positioning content in your page.
Links are really important when it comes to a website, and in this section, we will create several different types of links including links to other pages, links to other websites, email links, and linking to anchors.
After creating your text links, you will want to modify their appearance. In this section, you will create link styles for the bulk of your links and create another link style for specific links.
Lists amy seem boring and not very useful, but they are used for a lot of formatting options on your site. In this section, you will create bullet and number lists in your HTML.
Styling lists with CSS is a great way to make them behave the way you want in your design. It also leads to what the next section will introduce: navigation systems.
In this section, you will be taken to a favorite site of mine (from way back) that will give you tons of examples of navigation bars (menus) to learn from.
Tables have become a dirty word in web circles, but they can still be used today to display data. In this section you will build an HTML table.
Controlling the appearance of your tables using CSS is the focus of this section.
In this section, you will create a web form from scratch using a series of different types of form fields, you'll create your own submit button and understand the process for gathering form data from users.
Forms used to be so boring, but with CSS you can easily make your form much more attractive and useful to your users.
In this last section, you will discover a few of the tags that you can add to your pages to help with SEO (Search Engine Optimization), as well discover a great resource on the Google website for learning more about helping to get your pages a higher ranking in search engine results.
Brian Wood is a web developer and an Adobe Certified Instructor in Dreamweaver CS5, Acrobat 9 Pro, Illustrator CS5, and the author of seven training books (Illustrator, Muse, and InDesign), all published by Peachpit Press, as well as numerous training videos and DVDs on Adobe Muse, Dreamweamver & CSS, InDesign, Illustrator, Acrobat, including Acrobat multimedia and forms, Expression Web and others. In addition to training clients like Nordstrom, REI, Boeing, Costco, Starbucks, Nintendo, NBBJ and many, many others, Brian speaks regularly at national conferences, such as Adobe MAX, CSS for Designers tour, The InDesign Conference, The Web Design Conference, The Creative Suite Conference, as well as events hosted by AIGA, GAG, STC, CASE and other industry organizations. Brian has a free tips blog at askbrianwood.com/tips.