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
![Page 1: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/1.jpg)
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!
![Page 2: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/2.jpg)
Vocab
• Browser• Website• web page• Homepage• server
![Page 3: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/3.jpg)
Planning and Organization: Website
• Hierarchical• Linear• …
![Page 4: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/4.jpg)
Planning and Organization: Webpage
• http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
![Page 5: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/5.jpg)
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/
![Page 6: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/6.jpg)
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.
![Page 7: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/7.jpg)
Design Considerations
![Page 8: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/8.jpg)
Layout
![Page 9: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/9.jpg)
Color
![Page 10: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/10.jpg)
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
![Page 11: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/11.jpg)
Creating a Web Page
![Page 12: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/12.jpg)
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
![Page 13: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/13.jpg)
Essential Tags
<html><head><title> </title></head><body></body></html>
![Page 14: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/14.jpg)
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.
![Page 15: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/15.jpg)
Changing Background Color
Insert your background color in the body tag:<body bgcolor=“#ccffcc”>
![Page 16: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/16.jpg)
Colors
• RGB• http://www.pagetutor.com/common/
bgcolors216.html
![Page 17: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/17.jpg)
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.
![Page 18: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/18.jpg)
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?
![Page 19: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/19.jpg)
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>
![Page 20: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/20.jpg)
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
![Page 21: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/21.jpg)
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.
![Page 22: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/22.jpg)
Font Color
• You can specify color as well as size:<body> Something really <font
color="#ff0000">cool</font> </body>
![Page 23: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/23.jpg)
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.
![Page 24: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/24.jpg)
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.
![Page 25: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/25.jpg)
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!
![Page 26: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/26.jpg)
Other Helpful Tags and Attributes for Basic Formatting
![Page 27: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/27.jpg)
Start a new page…
• Start a new page and follow along with the lesson by trying each tag as I present it.
![Page 28: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/28.jpg)
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.
![Page 29: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/29.jpg)
Essential Tags
<html><head><title> </title></head><body></body></html>
![Page 30: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/30.jpg)
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
![Page 31: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/31.jpg)
To change the font face….
• <body> Lets change the <font face=”impact">font face!
</font> </body>
![Page 32: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/32.jpg)
Bigger and Smaller
Write something bigger or smaller:This is <big> bigger type </big> and this is
<small> smaller type. </small>
![Page 33: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/33.jpg)
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>
![Page 34: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/34.jpg)
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>
![Page 35: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/35.jpg)
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>
![Page 36: Web Design with HTML Basic Concepts](https://reader036.vdocuments.us/reader036/viewer/2022081504/5681509e550346895dbe9865/html5/thumbnails/36.jpg)
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