Creating a Web Page using HTML 5 CSS

Creating a Web Page using HTML 5 / CSS 3 Computer Concepts Computer Information Systems Portland Community College Feb 2016

Overview What is HTML 5? Basic HTML tags What is CSS 3? Formatting with CSS Creating a web page and style sheet Validating your web page Viewing your web page in a browser

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

Browsers and HTML / CSS A browser 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

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> An ending tag has a / after the < Examples: </html>, </body>,

What Do HTML Tags Look Like? HTML Tags Look Like: paragraph tag <h 1> </h 1> 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

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

Let’s Get Started You can use any text editor Note. Pad++ is recommended for Windows (click on the link to download it) Notepad++ alternatives for Mac You can also use the standard Note. Pad for Windows Text. Edit for Mac

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 Type Hyper Text Markup Language

Notes for Note. Pad++ 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

Basic HTML Skeleton

<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

<head> example

Tags to put in <body> What should appear on the web page goes inside the <body> element The simplest elements are: The headings elements <h 1> … <h 6> The paragraph element

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

Type this Code into your Editor

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

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.

Successful Validation

Unsuccessful Validation Sometimes one error causes many other errors Always fix the top error first E. g. go to line 14 and fix invalid <h> tag

Expected Result From <title> From <h 1>

CSS: Cascading Style Sheets The style of a web page is defined by 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 */

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

Create a CSS file Use your text editor File – New File Change Language to C - CSS (if using Note. Pad++) 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)

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

Making Text Stand Out You can make text stand out by using: - emphasized text I love the sound of the ocean important text Warning: beware of bears and are accessible screen readers render them appropriately

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

Example Change the HTML code to Here is my first paragraph 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

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.

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

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

Displaying am Image Use the image tag <img> to display an image Syntax is <img src = “im” alt = “text”> where im is 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

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

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

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 Protocol This protocol determines how messages are formatted and transmitted over the web

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>

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

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: