1 / 36

Web Design with HTML Basic Concepts

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 ….

snowy
Télécharger la présentation

Web Design with HTML Basic Concepts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design with HTMLBasic 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!

  2. Vocab • Browser • Website • web page • Homepage • server

  3. Planning and Organization: Website • Hierarchical • Linear • …

  4. Planning and Organization: Webpage • http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

  5. DOs and DON’Ts Good: www.dalmassodesigns.com www.greenenvisions.com/eng308-5/ Bad: www.yvettesbridalformal.com/ www.dokimos.org/ajff/ www.spanishtrailoutfitters.com/ Interesting: www.nobodyhere.com/justme/

  6. 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.

  7. Design Considerations

  8. Layout

  9. Color

  10. 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

  11. Creating a Web Page

  12. 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

  13. Essential Tags <html><head><title> </title></head><body></body></html>

  14. 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.

  15. Changing Background Color Insert your background color in the body tag: <body bgcolor=“#ccffcc”>

  16. Colors • RGB • http://www.pagetutor.com/common/bgcolors216.html

  17. 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.

  18. 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?

  19. 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 underlinewith 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>

  20. 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  

  21. 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.

  22. Font Color • You can specify color as well as size: <body> Something really <font color="#ff0000">cool</font> </body>

  23. 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.

  24. 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.

  25. 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!

  26. Other Helpful Tags and Attributes for Basic Formatting

  27. Start a new page… • Start a new page and follow along with the lesson by trying each tag as I present it.

  28. 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.

  29. Essential Tags <html><head><title> </title></head><body></body></html>

  30. Common Fonts Here are some common fonts installed on most computers. Select from this list when changing font. ArialArial BlackArial NarrowBookman Old StyleCentury GothicComic Sans MSCourier NewGeorgiaImpact Lucida ConsoleTahomaTimes New RomanTrebuchet MSVerdana

  31. To change the font face…. • <body> Lets change the <font face=”impact">font face!</font> </body>

  32. Bigger and Smaller Write something bigger or smaller: This is <big> bigger type </big> and this is <small> smaller type. </small>

  33. 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>

  34. 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>

  35. 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>

  36. 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

More Related