web design with html basic concepts
DESCRIPTION
Web Design with HTML Basic Concepts. Miss Deephouse 2010/2011 Many Thanks to “Joe,” at http://www.pagetutor.com/html_tutor/index.html , from whom I got many of these lessons!. Vocab. Browser Website web page Homepage server. Planning and Organization: Website. Hierarchical Linear …. - PowerPoint PPT PresentationTRANSCRIPT
Web Design with HTMLBasic Concepts
Miss Deephouse2010/2011
Many Thanks to “Joe,” at http://www.pagetutor.com/html_tutor/index.html, from
whom I got many of these lessons!
Vocab
• Browser• Website• web page• Homepage• server
Planning and Organization: Website
• Hierarchical• Linear• …
Planning and Organization: Webpage
• http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
DOs and DON’TsGood:www.dalmassodesigns.comwww.greenenvisions.com/eng308-5/
Bad:www.yvettesbridalformal.com/www.dokimos.org/ajff/www.spanishtrailoutfitters.com/
Interesting:www.nobodyhere.com/justme/
Activity
• Work in pairs• Create your own DO’s and DON’Ts list.• Find three examples of sites where something
is done well and three examples of sites where something is done poorly.
• For each example, explain in one sentence what is done well or not done well.
Design Considerations
Layout
Color
Assignment 2: “My Portfolio” Webpage Proof
Create a paper design for a page that we make at the end of the course to display your work. Your proof needs:
-Content, navigation, and title blocks-A title that is indicative of the purpose of the page (it should
indicate to the viewer that they are viewing your portfolio-A color scheme represented by your choice of markers or
pencils. I highly recommend that you choose your scheme through the use of a site such as colorschemedesigner.com
-A key matching your color choices to the hex code-A short blurb (submitted online) describing how your design
makes use of the layout and color principles discussed in class
Creating a Web Page
Creating a Page: Overview
• Create a text document (use Text Wrangler)• Use tags to specify what you want on your
page• Save the text document with a .html extension
(for example, firstpage.html)• Open your page with a browser (Firefox) to
view
Essential Tags
<html><head><title> </title></head><body></body></html>
Editing Your Page
• Other tags will specify other features• To edit your page, make the alterations to
your file using your text editor. Save the file. Reopen with browser or hit the reload button.
Changing Background Color
Insert your background color in the body tag:<body bgcolor=“#ccffcc”>
Colors
• RGB• http://www.pagetutor.com/common/
bgcolors216.html
Background Image
• Select an image saved on your desktop • Instead of the bgcolor command, enter <body
background="swirlies.gif"> in your text file.• Save the file, reload your page.
Go Play! (5 min)
• Download image files that you like to your desktop.
• Add them as backgrounds to your page.• Some considerations: Can your text still be
read easily over the image? Is your image distracting or hard on the eyes?
Formatting Text
• To change text to bold add the tags <b> and </b> to either side of whatever you want to make bold. For example:<body>This is not bold. <b> This is bold! </b></body>
• Similarly, you can put text in italics with the <i> tag and underline with the <u> tag.
• You can also use the commands in combination:This text is boring. <i><u> But this text is italicized and
underlined! </u></i>
Nested Tags
• The previous is an example of nested tags. If you are going to use tag pairs in combination then to avoid confusion they should be nested, not overlapping. Let me illustrate...
Overlapping tags.... Bad Nested tags.... good
Font Size
• First add the <font> tags...• <body> Let’s change the font <font>size!
</font> </body> Then specify a size attribute.• <body> Let’s change the font<font
size="6">size!</font> </body> • There are 7 font sizes, numbered 1 – 7, with 1
being the smallest and 7 the largest.
Font Color
• You can specify color as well as size:<body> Something really <font
color="#ff0000">cool</font> </body>
Vocab
• Two things I want to discuss now. First, a <tag> tells the browser to do something. An attribute goes inside the <tag> and tells the browser how to do it.
Vocab Cont.
• Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually).
• Every browser has a default font setting - font name, size and color. Unless you have messed with it, the default is probably Times New Roman or Verdana 12pt (which translates into 3 for our purposes) and it's black.
Assignment 3: Love Letters!
• Use your new html skills to write a love letter! The letter can be from you to a boy, a best friend, your mother, or anyone else! It could also be from one historical or fictional character to another. It can take the form of a poem or song if you prefer.
• Specify a background color or image.• Use bold, italics, underlining, and varying font sizes
and colors to express your feelings and emphasize your points!
Other Helpful Tags and Attributes for Basic Formatting
Start a new page…
• Start a new page and follow along with the lesson by trying each tag as I present it.
Font Face
Your font will only display if your visitor has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font.
Essential Tags
<html><head><title> </title></head><body></body></html>
Common FontsHere are some common fonts installed on most computers. Select from this list when
changing font.ArialArial BlackArial NarrowBookman Old StyleCentury GothicComic Sans MSCourier NewGeorgiaImpactLucida ConsoleTahomaTimes New RomanTrebuchet MSVerdana
To change the font face….
• <body> Lets change the <font face=”impact">font face!
</font> </body>
Bigger and Smaller
Write something bigger or smaller:This is <big> bigger type </big> and this is
<small> smaller type. </small>
Heading
Headings come in 6 sizes:<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4><h5>Heading 5</h5> <h6>Heading 6</h6>
Alignment
Change the alignment as show below. (Here the alignment attribute is put in the headline tag, but it could be used in other tags as well.)
<h2 align="left">Something really cool</h2> <h2 align="center">Something really cool</h2> <h2 align="right">Something really cool</h2>
You can change these defaults for the entire document in the <body> tag. (This may be more helpful later on.)
<body bgcolor="#000000" text="#ffff66” > (Text of your page goes here.)</body>
Assignment 4:
Find the lyrics to your favorite song or the words to your favorite poem. Use your formatting tools to visually represent the mood and ideas of the song or poem.
• Experiment more with underlining, bolding, and italicizing.• Play with headings and alignment.• Change the font face.
•Make rollercoaster!
• Make a RAINBOW