Review the basics of html:
The purpose of this course is to provide students with opportunities to learn intermediate web design and development skills. Thus, students are expected to either have already taken the 4360/7360 Introduction to Web Development course or have strong HTML foundations. This unit is to help you review and/or recall what you have learned about HTML/XHTML, either self-learned or learned in the 4360/7360 course. All students are expected to be able to do the following:
If you do not have sufficient levels of knowledge and skills, the online resources in this unit will help you master them quickly. Spend extra time reviewing the resources and practicing those prerequisites.
A good foundation of HTML skills is not only essential but also very critical for web design and development. After all, all web design and development programming is extended or built upon HTML code. Having a strong HTML foundation is required for your success in this class.
If you have questions, post them to the "Unit 1: Review of HTML Basics" discussion board.
Exercise: If you have not already, open a text editor to hand code a simple web page, your assignments.html page. Upload the page to your Bengal space using FTP software. Open a browser (preferably Google Chrome) to locate and preview the page in your Bengal space.
Read the article about how to name web files at http://www-ed.fnal.gov/lincon/tech_web_naming.shtml. Make sure that you follow the rules when you name your projects or assignment files throughout this semester. The rule of thumb is:
"File names and folder names should contain ONLY letters, digits, and underscores — NO spaces, punctuation, or funny characters."
A good rule of thumb to follow for naming web files is to use all lower case letters for single word file names (for example, index.html, review.doc, people.jpg) and use camel case for multiple word file names. Camel case is when you make the first word completely lowercase, and each succeeding word starts with an uppercase letter to aid in readability (for example, previewOfDraft.html, assignmentOneSmith.doc, threeFlowers.jpg).
All html elements have a default display property: usually either inline or block. Inline elements include the following:
Inline elements flow by default from left to right and fall inline with text and other elements. By contrast, block elements take up the entire width of the element they are inside of. Block elements include the following:
Block elements can have padding, margins, floats, positioning (like absolute or relative), widths and heights applied to them with CSS. This means they can often be made to look prettier. In addition, they automatically start a new line below the last block element, allowing for "blocky" sequences of boxes of content. The cool thing is that you can change block elements to inline and inline elements to block with CSS, like the following:
img {
display: block;
}
p {
display: inline;
}Now you can make those <img> elements have pretty borders, padding, etc. In addition to this, you can make elements have all of the benefits of block elements (like being able to specify padding or make them float), in addition to the benefits of inline elements (like being able to fall inline with the surrounding text or elements), by using CSS to make them inline-block:
span {
display: inline-block;
}One of the most common reasons to change the display of an element is when you need to float an image to the right or left of text (and have the text flow nicely around it). By default the img element is inline, so it cannot float, cannot have proper margins, etc. But you can create a left floated image with the following CSS applied to an img with a class of floatLeft (change the width, margins, and float property for your particular case):
img.floatLeft {
display: block;
float: left;
width: 300px;
margin: 5px 15px 10px 0px;
}To check your understanding, create a new html5 page (you can use Dreamweaver if you want), and then put several inline and block elements on the page with fake content and images. View in a browser to see how things look. Now add CSS to the top of your document (in the <head>), and try changing inline elements to block, block elements to inline, and inline elements to inline-block, and try applying other styles like margins and floats to different elements. The more you play, the more you will learn.
Note that this activity is not for points, and will not be graded: it’s for fun. But remember, fun is often the key to learning.