1 / 38

Creating a Web Page using HTML5 / CSS 3

Learn how to create web pages using HTML5 and CSS3. Understand HTML tags, CSS formatting, web page validation, and browser compatibility. Start with basic HTML structure and progress to styling with CSS for visually appealing web pages.

beulahm
Download Presentation

Creating a Web Page using HTML5 / CSS 3

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. Creating a Web Page using HTML5 / CSS 3 Computer ConceptsComputer Information SystemsPortland Community CollegeFeb 2016

  2. Overview • What is HTML5? • Basic HTML tags • What is CSS3? • Formatting with CSS • Creating a web page and style sheet • Validating your web page • Viewing your web page in a browser

  3. HTML : Hyper Text Markup Language • The content of a web page is defined with HTML tags • HTML tags tell a web browser what to display • Simple web pages have an extension of .htm or .html

  4. Browsers and HTML / CSS • Abrowser reads what to display from the HTML file displays the page based on the formatting in the CSS file • Common browsers:Edge, Chrome, Firefox, Safari, Opera

  5. HTML Tags • HTML Tags normally appear in pairs • A beginning tag consists of • a beginning angle bracket < • an element name, like html, body, p • an ending angle bracket > • Examples: <html>, <body> <p> • An ending tag has a / after the < • Examples: </html>, </body>, </p>

  6. What Do HTML Tags Look Like? • HTML Tags Look Like: • <p> </p> paragraph tag • <h1> </h1>heading tag • <ul> </ul> unordered list tag • <li> </li> list item tag • What is Common About HTML Tags? • Starting < > and ending </ > tags • Data goes between the tags • There is a default format for each tag, but can define alternate format in CSS

  7. <!DOCTYPE > Declaration Summary • Important! A web page conforming to the HTML 5 Standard, as required by this class, needs the following to start each html document: • <!DOCTYPE html> • <html > • The DOCTYPE declaration is not a html tag. It tells the browser which version of the markup language the page is written in.

  8. Let’s Get Started • You can use any text editor • NotePad++ is recommended for Windows (click on the link to download it) • Notepad++ alternatives for Mac • You can also use the standard • NotePad for Windows • TextEdit for Mac

  9. Starting Out • Launch your editor and choose File- New • Immediately chose File - Save As • Choose the location • Type in the file name(we use first here) • Choose the Save As TypeHyper Text Markup Language

  10. Notes for NotePad++ • As you are typing, you’ll notice word suggestions appear. To accept the word suggestion, use the Tab key • Notepad++ color codes your entries • Use the Tab key to Indent

  11. Basic HTML Skeleton

  12. <head> element • The <head> element includes information about the document. We will include: • <title> element describes your web page. • <meta charset = “UTF-8”> specifies Unicode. • <link rel="stylesheet" href="styles.css"> specifies css file(more about that later) • comment with author and date <!-- comments -->

  13. <head> example

  14. Tags to put in <body> • What should appear on the web page goes inside the <body> element • The simplest elements are: • The headings elements <h1> … <h6> • The paragraph element <p>

  15. The Heading Elements • <h1> is the largest heading • For accessibility, there should be exactly one <h1> element per page • <h6> is the smallest heading • For accessibility, don’t skip heading levels“going down” a page. Web accessibility

  16. Type this Code into your Editor

  17. Next Steps • Save your code (File – Save) • Validate your code. Fix any errors that validation reveals. • Find the folder where you saved your code.Double click on first.html

  18. Validation • Validation is an extremely helpful tool • It spots syntax errors (code that is not well formed) • Recommend that you validate your code frequently, and fix errors that are revealed.

  19. Successful Validation

  20. Unsuccessful Validation • Sometimes one error causes many other errorsAlways fix the top error firstE.g. go to line 14 and fix invalid <h> tag

  21. Expected Result From <title> From <h1>

  22. CSS: Cascading Style Sheets • The style of a web page is defined by CSS • CSS rules tell how to display an HTML page • CSS files have an extension of .css • Comments in css are different from HTML comments (they start with /* and end with */)/* This is a css comment */

  23. CSS Rule Set • A Rule Set consists of a selector followed by a declaration black (a set of rules) • The format of a css rule is property: value;A list of css properties • Example: body{ background-color: lightblue; } • See: Color names and Color Picker for color ideas

  24. Create a CSS file • Use your text editor • File – New File • Change Language to C - CSS (if using NotePad++) • Type in this rule: body{ background-color: lightblue; } • Save as styles.css in same folder as first.html • Validate the CSS file (this is different from the HTML validator)

  25. What does CSS do? • Refresh the HTML web page(or double click on the HTML file again) Refresh button

  26. Making Text Stand Out • You can make text stand out by using: • <em> - emphasized text • I love the sound of the ocean • I love the sound of the ocean • <strong> important text • Warning: beware of bears • <em> and <strong> are accessiblescreen readers render them appropriately

  27. Using CSS with <em> and <strong> • Without CSS • <em> - italics • <strong> bold • Using CSS to increase importance strong{ font-weight: bold; text-transform: uppercase; color: #008040; } • Wondering what #008040 means? Refer to Color Picker

  28. Example • Change the HTML code to <p> Here is my <strong>first paragraph</strong></p> • Add CSS from previous page to styles.css • Refresh web page to get: Note: be sure to validate your code (HTML and CSS), especially if you don’t get what you expect

  29. Lists • Ordered lists <ol> indicate a preference among choices • Standard ordering is numeric (1, 2, 3,…) • Of course, CSS can change ordering to letters, etc. • Unordered lists <ul> indicate no preference • Standard defines a bulleted list • CSS can change this to squares, circles, etc.

  30. List Items • Items in a list are indicated by <li> • Example: <ol> <li>First item</li> <li>Second item</li> </ol>

  31. CSS for Lists • Adding this to styles.css will change the ordering on <ol> from numbers to letters ol{ list-style-type: lower-alpha; }

  32. Displaying am Image • Use the image tag <img> to display an image • Syntax is <imgsrc = “im” alt = “text”>where imis the source and name of the image and text is the alternate text, used for accessibility • If the image is in the local folder,im is just the file name

  33. Image Example • So if we have nestucca.jpg in the same folder • We can code: <imgsrc="nestucca.jpg" alt = "nestucca bay">

  34. Image Example (continued) • The picture may be too big unless we put something like this in the cssfile img{ max-width: 320px; max-height: 320px; width: auto; height: auto; margin: auto; } • Important: to preserve aspect ratio never set bothwidth and height to an actual value; better to set them to auto

  35. Universal Resource Locator • URLs specify address on the World Wide Web • They have the format:protocol://website/other_information • We’ll primarily use http: or https:Example: http://www.pcc.edu/ • http stands for Hyper Text Transfer ProtocolThis protocol determines how messages are formatted and transmitted over the web

  36. Links (Anchors <a>) • Links are created with the anchor <a> tag<a href = "http://www.pcc.edu">PCC home page</a> • href stands for “hypertext reference” • If href points to a URL, we say it is an external (another web site) reference • If href points to a local file, we say it’s an internal reference <a href = “second.html">My second page</a>

  37. More about Links • In the link we created<a href = "http://www.pcc.edu">PCC home page</a>the text between the start tag and end tag (PCC home page) is what appears on the web page that the user can click • When the user clicks on PCC home page,the web bite http://www.pcc.edu appears

  38. Link Example • Add to our HTML code above the ordered list<a href = "http://www.pcc.edu">PCC home page</a> • Save and refresh to see:

More Related