1 / 18

Web Design Club

Web Design Club. Tuesday, October 21 st Available at http:// markw.asia. Itinerary. Welcome! Housekeeping Attendance Announcements from The President The Vice President Secretary - Notes about what we learned last week Review Last week So far New Today. Review.

olga-marsh
Download Presentation

Web Design Club

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 Club Tuesday, October 21st Available at http://markw.asia

  2. Itinerary • Welcome! • Housekeeping • Attendance • Announcements from • The President • The Vice President • Secretary - Notes about what we learned last week • Review • Last week • So far • New Today

  3. Review • Basic website layout • Websites are made of one or more web pages • Web page • Basic structural elements • Starts and ends with <HTML> and </HTML> • <Head></Head> element contains <title> of website and certain links • <body> element contains everything else • Text arrangement • Headings <h1> is the largest, <h6> is the smallest • <p> is used for blocks of text

  4. Practice • Download the article that I posted on my website for you • Open it in your word processor • Paste into your web editor • Use formatting for the headers and paragraphs

  5. Review: Images • Inserting images • This is your image element: • <img…> everything after img tells the web browser where to find the picture • <imgsrc="Profile Images/MarkToastBubbleStudentPics.png" alt="Mark toasting student pictures"> • This means the picture must be on your website’s server

  6. Image practice • Download the images from my website • Remember where you save them! • Insert the images underneath the text from the previous practice activity • Type the <img….> code yourself Or • Use your web editor’s Image insert feature

  7. Review HTML: Unordered Lists • Unordered list • Type <ul> at the beginning of the list • Press enter or return • Type <li> before each item in the list (li) • Type </li> after each item in the list • Press enter or return • Type </ul> at the end of the list

  8. Unordered list example • If we want to make an unordered list like this: • Mark • His dog • His cat • Then we use • <ul> • <li>Mark</li> • <li>His dog</li> • <li>His cat</li> • </ul>

  9. Unordered Lists Practice • Make an unordered list of things that are in your pockets now • Money • Keys • Paper • Phone • Elephant

  10. Ordered Lists • What if you need to make a list with numbers? • <ol> • <li></li> • <li></li> • <li></li> • </ol>

  11. Example: Ordered Lists • Example: Steps for typing a list with numbers • First you type <ol> • Second you press enter or return • Third you type <li> at the beginning of the list item (li) • Fourth you type </li> at the end of the list item • Type </ol> • <ol> • <li>First you type “<ol>”</li> • <li>Second you press enter or return</li> • <li>Third you type “<li>” at the beginning of the list item(li)</li> • <li>Fourth you type “</li>” at the end of the list item</li> • <li>Type “</ol>”</li> • </ol>

  12. Ordered Lists Practice • Make a list of 5 things you do every day • Start with “1. Wake up” • Finish with “5. Go to sleep”

  13. Review CSS What is it? • CSS stands for Cascading Style Sheet • CSS is how we turn words on a white screen into a beautiful website • We can use it to: • Create a border around an object • Change the background color • Change the font style and size of the words • Make your pointer turn into a hand in some places • And so much more!

  14. How to make a new CSS • To make a new style sheet you should • Look for the option in your web editor when you click “New” • Open your text editor (Notepad, Textedit) • Type /* CSS Document */ at the top

  15. CSS Selectors • How can we choose style sheet items? We use Selectors like the ones you use in your html(h1, p, body) • Writing stylesheets • Always type the selector, hit spacebar, then type { • Press enter • Type the thing you want to change then hit : • Type the change you want to make then hit ; • Type } at the end • Example: • p { • Font-color: blue; • } • More selectors and introduction to CSS: • http://www.w3schools.com/CSS/css_selectors.asp

  16. CSS Basics • How can we take a basic text article and center the paragraph? p { text-align: center; } • How can we make an h1 heading have red words? h1 { font-color: red; } • How can we change the background of our body from white to green? Body { background-color: green; }

  17. Practice CSS • Change your article’s heading (h1) font color to any other color • Change the alignment of your article’s paragraph to right-align • Change your background-color to blue

  18. Review • Today we learned about • Ordered Lists • CSS style sheets • We practiced • Inserting and changing text • Inserting pictures • Inserting lists • Creating stylesheets • Using stylesheets to change text and colors

More Related