HTML & CSS. Lesson 1: HTML Basics Lesson 2: Adding Tables Lesson 3: Intro to CSS Lesson 4: CSS in more detail Lesson 5: Review

Size: px
Start display at page:

Download "HTML & CSS. Lesson 1: HTML Basics Lesson 2: Adding Tables Lesson 3: Intro to CSS Lesson 4: CSS in more detail Lesson 5: Review"

Transcription

1 HTML & CSS Lesson 1: HTML Basics Lesson 2: Adding Tables Lesson 3: Intro to CSS Lesson 4: CSS in more detail Lesson 5: Review

2 Lesson 1: HTML Basics

3 1. Write main tile HTML & CSS 2. Write today s date Match the HTML tags with the description of what they do. Starter <u> </u> <head></head> Makes the text BOLD Underlines the text <body></body> <p></p> <h1></h1> <a href= ></a> Encloses the head of the HTML document Creates a link to another webpage Makes the text italic Encloses the body of the HTML document <b></b> Formats the text to heading 1 <i></i> Creates a new paragraph of text HTML & CSS Lesson 1: HTML Basics

4 Starter How did you do? <u> </u> Underlines the text <head></head> <body></body> <p></p> Encloses the head of the HTML document Encloses the body of the HTML document Creates a new paragraph of text <h1></h1> Formats the text to heading 1 <a href= ></a> <b></b> <i></i> Creates a link to another webpage Makes the text BOLD Makes the text italic HTML & CSS Lesson 1: HTML Basics

5 By the end of the lesson you will: Learning Objectives Understand the difference between HTML and CSS Be able to create a basic webpage Apply and extend your knowledge to improve your basic webpage HTML & CSS Lesson 1: HTML Basics

6 HTML & CSS Use the internet to find out what the following stands for: HTML CSS Extension - write one sentence to explain the difference between the two. HTML & CSS Lesson 1: HTML Basics

7 HTML & CSS HTML (Hypertext Markup Language) HTML is the language for describing web pages. CSS (Cascading Style Sheets) A style sheet is a file that describes how a HTML file should look. The difference: HTML describes a webpage but CSS describes how it will look. HTML & CSS Lesson 1: HTML Basics

8 Getting prepared Start Documents In your Year 9 Computing folder: Create a new folder called HTML and CSS HTML & CSS Lesson 1: HTML Basics

9 A HTML page is called a WEBPAGE Create your first webpage Start All Programs <!DOCTYPE html> Declares this is a HTML document <html> Opens the HTML code. </html> Closes the HTML code. Accessories Notepad Type the following < > = opening tag </> = closing tag All our HTML code must be enclosed in tags. HTML & CSS Lesson 1: HTML Basics

10 Add the following to your code. Create your first webpage <head> contains info about your HTML file e.g. title <!DOCTYPE html> <html> <head> </head> </html> CHALLENGE In between your head tags: Add title tags Insert your title as your name Hint: your name would go in between the opening and closing title tags HTML & CSS Lesson 1: HTML Basics

11 This is what it should look like. Create your first webpage <head> contains info about your HTML file e.g. title <!DOCTYPE html> <html> <head> <title> Mrs Dutta </title> </head> </html> HTML & CSS Lesson 1: HTML Basics

12 <body> is where you put the content e.g. text, images etc. You re getting the hang of it: After your closing head tag: Add body tags (in the same way you added head tags) <body> </body> Create your first webpage You got it! In between your body tags: Add your paragraph tags (in the same way you added title tags) You superstar! In your paragraph tags: Add Hi my name is. Here is an optical illusion. HTML & CSS Lesson 1: HTML Basics

13 This is what it should look like. Create your first webpage <head> contains info about your HTML file e.g. title <body> is where you put the content e.g. text, images etc. <!DOCTYPE html> <html> <head> <title> Mrs Dutta </title> </head> <body> <p>hi my name is Mrs Dutta. Here is an optical illusion.</p> </body> </html> HTML & CSS Lesson 1: HTML Basics

14 1. File Save 2. Save in your HTML and CSS folder 3. Call it Index.html Create your first webpage HTML & CSS Lesson 1: HTML Basics

15 Congratulations! 1. Double click on your Index file YOU HAVE JUST CREATED A WEBPAGE! In your books write the following: The three things I would like to add to my webpage to make it look better are: HTML & CSS Lesson 1: HTML Basics

16 You may go online and find out how. Add the 3 things to your website Struggling for ideas? Here are my 3 things: 1. Add a heading in the body 2. Add a picture in the body 3. Change the body background colour to light green HTML & CSS Lesson 1: HTML Basics

17 Add the 3 things to your website 1. Add a heading in the body <h1>mrs Dutta</h1> 2. Add a picture in the body <img src= N:\Pictures\EHS logo.jpg /> 3. Change the background colour to light green <body bgcolor=#a0db8e> HTML & CSS Lesson 1: HTML Basics

18 Congratulations! In your books write the following: The three things I would like to add to my webpage to make it look better are: Add which tags you used for each one. HTML & CSS Lesson 1: HTML Basics

19 Understand the difference between HTML and CSS Learning Objectives Be able to create a basic webpage Apply and extend your knowledge to improve your basic webpage In your book write the following: 3 things I have learnt today are: 1 thing I would like to learn about HTML is: HTML & CSS Lesson 1: HTML Basics

20 Lesson 2: Adding Tables

21 Don t forget today s date and title HTML Continued In your books write down the tags used 1 Starter 2 3 Mark your work: 1. <h1> </h1> 2. <p> </P> 3. <img src= /> HTML & CSS Lesson 2: Adding Tables

22 By the end of the lesson you will: Learning Objectives Understand how to add a table. Be able to create a basic webpage and add a table. Apply and extend your knowledge to create a basic social networking homepage. HTML & CSS Lesson 2: Adding Tables

23 Adding <a href </a> adds a link. Links Add the following to your code (Index.html) and see what happens <a href= High School</a> <!DOCTYPE html> <html> <head> <title> Mrs Dutta </title> </head> <body bgcolor=#a0db8e> <h1>mrs Dutta</h1> <p>hi my name is Mrs Dutta. Here are some little known facts about me.</p> <a href= High School</a> <img src= "C:\Users\Sumantha\Pictures\EHS logo.jpg"/> </body> </html> HTML & CSS Lesson 2: Adding Tables

24 Adding <br> </br> adds a new line. Links Before: After: Add <br> </br> so that your image appears on a new line after your link. HTML & CSS Lesson 2: Adding Tables

25 Social Networking On Notepad click File New File Save As Go to your Year 9 folder and HTML & CSS folder Call it Social Networking.html 1. Create the basic HTML page using: a. <!DOCTYPE html> b. <html> </html> c. <head> </head> d. <title></title> The title should be Friends Book e. <body> </body> HTML & CSS Lesson 2: Adding Tables

26 <!DOCTYPE html> <html> <head> <title> Friends Book </title> </head> Tables <body> </body> </html> <table></table> Add the table tags to the body of your HTML document. HTML & CSS Lesson 2: Adding Tables

27 <tr></tr> Adds rows to your table. <!DOCTYPE html> <html> <head> <title> Friends Book </title> </head> <body> <table> <tr> </tr> </table> </body> </html> Add two more rows to your table Tables HTML & CSS Lesson 2: Adding Tables

28 <!DOCTYPE html> <html> <head> <title> Friends Book </title> </head> Add: Tables <body> <table border="1px"> <tr> <td>header</td> </tr> <tr> <td>main</td></tr> <tr> <td>footer</td> </tr> A border to your table The table data <td> </td> </table> </body> </html> HTML & CSS Lesson 2: Adding Tables

29 This is how it looks. Tables <table border="1px"> <tr> <td>header</td> </tr> <tr> <td>main</td> <td>2nd column</td></tr> <tr> <td>footer</td> </tr> </table> HTML & CSS Lesson 2: Adding Tables

30 <table border="1px"> <tr> <td>header</td> </tr> <tr> <td>main</td> <td>2nd column</td></tr> <tr> <td>footer</td> </tr> Tables </table> Add to your HTML code to create the following: HTML & CSS Lesson 2: Adding Tables

31 <!DOCTYPE html> <html> <head> <title> Friends Book </title> </head> <body> Tables <table border="1px"> <tr> <td>header</td> </tr> <tr> <td>name</td> <td>mrs Dutta</td></tr> <tr> <td>school</td> <td>esher High School</td> </tr> <tr> <td>footer</td> </tr> </table> </body> </html> HTML & CSS Lesson 2: Adding Tables

32 In Fireworks: Plenary Create a new file that is 800px x 200 px Design a header for your social networking page Save it in your HTML & CSS folder and call it Header File Export Wizard Save as JPG or GIF Replace Header with your image (look at Index.html to see how) HTML & CSS Lesson 2: Adding Tables

33 Lesson 3: Intro to CSS HTML & CSS Lesson 3: Intro to CSS

34 <!DOCTYPE html> <html> <head> <title> Friends Book </title> </head> <body> <table border="1px"> <tr> <td>header</td> </tr> <tr> <td>name</td> <td>mrs Dutta</td></tr> <tr> <td>school</td> <td>esher High School</td> </tr> <tr> <td>footer</td> </tr> </table> Annotate the HTML code. Starter </body> </html> HTML & CSS Lesson 3: Intro to CSS

35 <!DOCTYPE html> 4 <html> <head> <title> Friends Book </title> </head> <body> 2 1 Starter 5 <table border="1px"> <tr> <td>header</td> </tr> <tr> <td>name</td> <td>mrs Dutta</td></tr> <tr> <td>school</td> <td>esher High School</td> </tr> <tr> <td>footer</td> </tr> </table> </body> </html> 6 3 HTML & CSS Lesson 3: Intro to CSS

36 By the end of the lesson you will: Learning Objectives Understand how CSS is used to style HTML Be able to create a basic CSS file Apply and extend your knowledge to add elements to CSS file HTML & CSS Lesson 3: Intro to CSS

37 <div></div> Allows us to divide the page into different pieces. <div> tag Start Computer Student Share ICT ICT MISS DUTTA Year 9 HTML & CSS Copy and paste DIV.html into your Year 9 HTML & CSS folder Open it in Notepad HTML & CSS Lesson 3: Intro to CSS

38 <div></div> Allows us to divide the page into different pieces. <!DOCTYPE html> <html> <head> <title>result</title> </head> <body> <div> tag <div style="width:50px; height:50px; backgroundcolor:red"></div> <div style="width:50px; height:50px; backgroundcolor:blue"></div> <div style="width:50px; height:50px; backgroundcolor:green"></div> </body> </html> Create a new <div> and give it the background yellow. HTML & CSS Lesson 3: Intro to CSS

39 <!DOCTYPE html> <html> <head> <title>result</title> </head> <body> <div> tag <div style="width:50px; height:50px; backgroundcolor:red"></div> <div style="width:50px; height:50px; backgroundcolor:blue"></div> <div style="width:50px; height:50px; backgroundcolor:green"></div> <div style="width:50px; height:50px; backgroundcolor:yellow"></div> </body> </html> HTML & CSS Lesson 3: Intro to CSS

40 <div> <div></div> tag Useful for CSS Allows us to create visual objects like menus, sidebars and more... HTML & CSS Lesson 3: Intro to CSS

41 CSS (Cascading Style Sheets) A style sheet is a file that describes how a HTML file should look. The difference: HTML describes a webpage but CSS describes how it will look. We need to create a different CSS file which will be attached to our HTML document. CSS HTML & CSS Lesson 3: Intro to CSS

42 CSS Start Computer Student Share ICT ICT MISS DUTTA Year 9 HTML & CSS Copy and paste CSS Intro.html into your Year 9 HTML & CSS folder Open it in Notepad HTML & CSS Lesson 3: Intro to CSS

43 <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>fancy Fonts</title> </head> <body> CSS This is where we attach the CSS file which says that text should be in red <p>i'm a paragraph written in red font, but one of my words is <span>blue</span>!</p> </body> </html> HTML & CSS Lesson 3: Intro to CSS

44 CSS <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <link /> is where we link the CSS file to the HTML document. It is self-closing (doesn t need </link>) type should always be equal to text/css rel should always be equal to stylesheet href (remember this is how we add a link) This should point to your CSS file HTML & CSS Lesson 3: Intro to CSS

45 CSS Create a new Notepad file File Save (in your HTML & CSS folder) Call it stylesheet.css HTML & CSS Lesson 3: Intro to CSS

46 p { color: red; } CSS span { /write your CSS here/ } 1. Type the above code in your CSS file 2. Replace /write your CSS here/ to make the color blue p { color: red; } span { color:blue; } HTML & CSS Lesson 3: Intro to CSS

47 <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>fancy Fonts</title> </head> <body> <p>i'm a paragraph written in red font, but one of my words is <span>blue</span>!</p> </body> </html> p { color: red; } span { color:blue; } Here is what we have so far HTML & CSS Lesson 3: Intro to CSS

48 1. Add to the CSS file so that the text in the <span></span> tags are cursive. font-family: cursive; 2. Add to the CSS file so that the text in the <p></p> tags are size 100px. font-size: 100px; p { color: red; font-size:100px; } CSS Open your CSS Intro.html in the Internet browser to see what it looks like now. BEFORE span { color:blue; fontfamily:cursive; } HTML & CSS Lesson 3: Intro to CSS

49 Plenary In your books: Today s date and Title: Intro to CSS 1. What does CSS stand for? 2. What are 3 advantages of using CSS stylesheets instead of including all the formatting within the HTML document? In your books: 1. What does CSS stand for? Cascading Style Sheets. 2. What are 3 advantages of using CSS stylesheets instead of including all the formatting within the HTML document? You can re-use the CSS file for other HTML files; saves time because you don t have to keep typing the formatting rules; keeps the code neat. HTML & CSS Lesson 3: Intro to CSS

50 Lesson 4: CSS in more detail HTML & CSS Lesson 4: CSS in more detail

51 Recap of previous lessons Starter In your books write today s date and title: CSS in more detail Complete the following sentences: The difference between HTML and CSS is The opening and closing tags for a HTML document are I would write the following on a CSS stylesheet if I wanted to change the writing in a paragraph to red HTML & CSS Lesson 4: CSS in more detail

52 By the end of the lesson you will: Learning Objectives Understand CSS syntax. Be able to amend CSS file and add new <div></div> tags to HTML document. Apply and extend your knowledge to create a family tree for HTML. HTML & CSS Lesson 4: CSS in more detail

53 What does syntax mean? The grammar of a programming language. CSS Syntax Syntax of CSS: Selector { Property: value; } Example: p{ color: red; } Your Year 9 HTML & CSS folder Open stylesheet.css from last lesson in notepad. HTML & CSS Lesson 4: CSS in more detail

54 CSS Syntax p { color: red; font-size:100px; } span { color:blue; font-family:cursive; } TASKS 1. CSS - Change the font color for paragraphs to green 2. CSS - Change anything in <span></span> tags into the color red 3. HTML - Open your CSS Intro.html file in notepad and change the writing in <p></p> to say I m a paragraph written in green font, but one of my words is green HTML & CSS Lesson 4: CSS in more detail

55 CSS Syntax p { color: green; font-size:100px; } span { color:red; font-family:cursive; } <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>fancy Fonts</title> </head> <body> <p>i m a paragraph written in green font, but one of my words is <span>green </span>!</p> </body> </html> HTML & CSS Lesson 4: CSS in more detail

56 Start Computer Student Share ICT ICT MISS DUTTA Year 9 HTML & CSS Copy and paste More CSS.html into your Year 9 HTML & CSS folder Open it in Notepad HTML & CSS Lesson 4: CSS in more detail

57 You can see that it re-uses the stylesheet.css that we used for CSS Intro.html TASK: Change stylesheet.css so that your HTML webpage looks like this: Create your own stylesheet Size= 50px Font = arial Size= 50px Font=cursive Style=italic HTML & CSS Lesson 4: CSS in more detail

58 h3 { color:blue; font-family:arial; font-size:50px; } p { color: red; font-size:30px; } span { color:green; font-family:cursive; font-style:italic; } Create your own stylesheet HTML & CSS Lesson 4: CSS in more detail

59 Adding HTML Add a new <div></div> to add the following underneath what you already have in the body of More CSS.html HTML & CSS Lesson 4: CSS in more detail

60 Adding CSS You can add one rule for the whole HTML document by using the * symbol. Add a border to every element on the HTML page by adding the following to your CSS: * { border: 2px solid black; } Change your CSS so that ALL the text is blue. Hint: you need to delete the other colours you have set. HTML & CSS Lesson 4: CSS in more detail

61 Plenary You can think of the structure of an HTML document as a family tree. Example: <HTML> is the trunk of the tree and <head> and <body> are its children. TASK: Create a new html file called HTML Tree.html Create the HTML code and amend the CSS to create this page. h1 size 100px h2 size 60px Table with border 1 px Font is Arial h3 size 30px HTML & CSS Lesson 4: CSS in more detail

62 HTML Tree.html <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>html Tree</title> </head> <body> <table border="1px"> <tr><td><h1>html</h1></td></tr> <tr><td><h2>head</h2></td><td><h2>body</h2 ></td></tr> <tr><td><h3>table</h3></td><td><h3>div</h3 ></td></tr> <tr></tr> </table> </body> </html> HTML & CSS Lesson 4: CSS in more detail

63 h1 { color:green; font-size:100px; } stylesheet.css h2 { color:blue; font-size:60px; } h3{ color:red; font-size:30px; } * { font-family:arial; } HTML & CSS Lesson 4: CSS in more detail

64 Lesson 5: Review of HTML & CSS HTML & CSS Lesson 5: Review of HTML & CSS

65 Open in Google Chrome. Log in using your school address and password esher Select HTML & CSS HTML & CSS Lesson 5: Review of HTML & CSS

66 Complete the following lessons. HTML Basics CSS: An Overview Extension: HTML Basics II CSS Selectors HTML & CSS Lesson 5: Review of HTML & CSS

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

INTRODUCTION TO CSS. Mohammad Jawad Kadhim

INTRODUCTION TO CSS. Mohammad Jawad Kadhim INTRODUCTION TO CSS Mohammad Jawad Kadhim WHAT IS CSS Like HTML, CSS is an interpreted language. When a web page request is processed by a web server, the server s response can include style sheets,

More information

Html basics Course Outline

Html basics Course Outline Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and

More information

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1 CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet HTML VS. CSS HTML is used to define the structure and content of a webpage. CSS

More information

Three Ways to Use CSS:

Three Ways to Use CSS: Introduction to CSS CSS Defined: Short for "Cascading Style Sheets". Determines how the elements in our XHTML documents are displayed and formatted. Designed to separate the content of a web page from

More information

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?

More information

ADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)

ADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model) INTRO TO CSS RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY WEEK 1 HTML In Week

More information

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction

More information

CSS: formatting webpages

CSS: formatting webpages CSS: formatting webpages Why CSS? separate content from formatting (style) style can be changed easily without rewriting webpages keep formatting consistent across website allows more advanced formatting

More information

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS

More information

HTML and CSS: An Introduction

HTML and CSS: An Introduction JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction

More information

HTMLnotesS15.notebook. January 25, 2015

HTMLnotesS15.notebook. January 25, 2015 The link to another page is done with the

More information

Which is why we ll now be learning how to write in CSS (or cascading sheet style)

Which is why we ll now be learning how to write in CSS (or cascading sheet style) STYLE WITH CSS My word is changing things in HTML difficult! Can you imagine if we had to do that for every single thing we wanted to change? It would be a nightmare! Which is why we ll now be learning

More information

Lab Introduction to Cascading Style Sheets

Lab Introduction to Cascading Style Sheets Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,

More information

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph. What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe

More information

Downloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -

Downloads: Google Chrome Browser (Free) -   Adobe Brackets (Free) - Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will

More information

Chapter 2. Self-test exercises

Chapter 2. Self-test exercises Chapter 2 Self-test exercises ST1. Who invented the World Wide Web? Answer: Tim Berners-Lee ST2. What does the acronym http stand for? Answer: HyperText Transfer Protocol ST3. What does the acronym ftp

More information

UNIX and Operating System Topics

UNIX and Operating System Topics UNIX and Operating System Topics 1. What is SFTP? Name software applications that provide sftp service 2. What does SSH mean? How do you use ssh? 3. What is a Terminal window on the Mac? Why/when do you

More information

Creating Web Pages. Getting Started

Creating Web Pages. Getting Started Creating Web Pages Getting Started Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking to other Files What Web Pages Are Web Pages combine

More information

Web Publishing Basics I

Web Publishing Basics I Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic

More information

Diploma in Mobile App Development Part I

Diploma in Mobile App Development Part I Diploma in Mobile App Development Part I Lesson 3 Intro to HTML & CSS MAD Educator: Tadhg Deeney @ShawMobileApp Webinar Interaction Any questions? - Our support team are here to help Chat box - Comment

More information

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example.

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Sorry about these half rectangle shapes a Smartboard issue today. To

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css charlie.jpg Linking to your HTML You need to link to your css in the of your HTML file.

More information

.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube {

.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube { .hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in;.tube { color: #996600; height: 3in; width: 12in; position: fixed; What is CSS? Cascading Style Sheets CSS is responsible

More information

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML

More information

Lesson 1 HTML Basics. The Creative Computer Lab. creativecomputerlab.com

Lesson 1 HTML Basics. The Creative Computer Lab. creativecomputerlab.com Lesson 1 HTML Basics The Creative Computer Lab creativecomputerlab.com What we are going to do today Become familiar with web development tools Build our own web page from scratch! Learn where to find

More information

DAY 4. Coding External Style Sheets

DAY 4. Coding External Style Sheets DAY 4 Coding External Style Sheets LESSON LEARNING TARGETS I can code and apply an embedded style sheet to a Web page. I can code and apply an external style sheet to multiple Web pages. I can code and

More information

HTML & CSS. Rupayan Neogy

HTML & CSS. Rupayan Neogy HTML & CSS Rupayan Neogy But first My Take on Web Development There is always some tool that makes your life easier. Hypertext Markup Language The language your web browser uses to describe the content

More information

ITNP43: HTML Lecture 4

ITNP43: HTML Lecture 4 ITNP43: HTML Lecture 4 Niederst, Part III (3rd edn) 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and

More information

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.

More information

TEST NAME: MMWD 4.01 TEST ID: GRADE:09 - Ninth Grade Twelfth Grade SUBJECT:Computer and Information Sciences TEST CATEGORY: My Classroom

TEST NAME: MMWD 4.01 TEST ID: GRADE:09 - Ninth Grade Twelfth Grade SUBJECT:Computer and Information Sciences TEST CATEGORY: My Classroom TEST NAME: MMWD 4.01 TEST ID:2416218 GRADE:09 - Ninth Grade - 12 - Twelfth Grade SUBJECT:Computer and Information Sciences TEST CATEGORY: My Classroom MMWD 4.01 Page 1 of 23 Student: Class: Date: 1. Which

More information

How the Internet Works

How the Internet Works How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6 CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading

More information

MPT Web Design. Week 1: Introduction to HTML and Web Design

MPT Web Design. Week 1: Introduction to HTML and Web Design MPT Web Design Week 1: Introduction to HTML and Web Design What will we do in this class? Learn the basics of HTML and how to create our own template Basic website structure Learn design concepts for a

More information

Web Technology. Assignment 3. Notes: This assignment is individual assignment, every student should complete it by himself.

Web Technology. Assignment 3. Notes: This assignment is individual assignment, every student should complete it by himself. Web Technology Assignment 3 Due: Next Section. (one day before if you submit by email) Notes: This assignment is individual assignment, every student should complete it by himself. 1. Choose the correct

More information

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language

More information

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties

More information

CSS is applied to an existing HTML web document--both working in tandem to display web pages.

CSS is applied to an existing HTML web document--both working in tandem to display web pages. CSS Intro Introduction to Cascading Style Sheets What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to allowing web designers to style specific elements on their pages and throughout

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan

More information

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

<body bgcolor=  fgcolor=  link=  vlink=  alink= > These body attributes have now been deprecated, and should not be used in XHTML. CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,

More information

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad Tutorial Activities Code o o Editor: Notepad Focus : Text manipulation & webpage skeleton Open Notepad Click in the search bar and type notepad to load it up, you should see something like this: Type in

More information

Hyper Text Markup Language HTML: A Tutorial

Hyper Text Markup Language HTML: A Tutorial Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

Basic CSS Lecture 17

Basic CSS Lecture 17 Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles

More information

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its

More information

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development. Quiz1 CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

Creating A Web Page. Computer Concepts I and II. Sue Norris

Creating A Web Page. Computer Concepts I and II. Sue Norris Creating A Web Page Computer Concepts I and II Sue Norris Agenda What is HTML HTML and XHTML Tags Required HTML and XHTML Tags Using Notepad to Create a Simple Web Page Viewing Your Web Page in a Browser

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

Web Programming Week 2 Semester Byron Fisher 2018

Web Programming Week 2 Semester Byron Fisher 2018 Web Programming Week 2 Semester 1-2018 Byron Fisher 2018 INTRODUCTION Welcome to Week 2! In the next 60 minutes you will be learning about basic Web Programming with a view to creating your own ecommerce

More information

HTTP & Websites. Web Browsers. Web Servers vs. Web sites. World Wide Web. Internet Explorer. Surfing the World Wide Web. Part 4. The World Wide Web

HTTP & Websites. Web Browsers. Web Servers vs. Web sites. World Wide Web. Internet Explorer. Surfing the World Wide Web. Part 4. The World Wide Web HTTP & Websites Web Browsers Part 4 Surfing the World Wide Web World Wide Web Web Servers vs. Web sites The World Wide Web massive collection of websites on the Internet they link to each other and form

More information

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4 Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered

More information

HTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms.

HTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms. HTTP and HTML We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms. HTTP and HTML 28 January 2008 1 When the browser and the server

More information

In this project, you ll learn how to create your own webpage to tell a story, joke or poem. Think about the story you want to tell.

In this project, you ll learn how to create your own webpage to tell a story, joke or poem. Think about the story you want to tell. Tell a Story Introduction In this project, you ll learn how to create your own webpage to tell a story, joke or poem. Step 1: Decide on a story Before you get coding, you ll need to decide on a story to

More information

The Structure of the Web. Jim and Matthew

The Structure of the Web. Jim and Matthew The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop

More information

What You Will Learn Today

What You Will Learn Today CS101 Lecture 03: The World Wide Web and HTML Aaron Stevens 23 January 2011 1 What You Will Learn Today Is it the Internet or the World Wide Web? What s the difference? What is the encoding scheme behind

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

By completing this practical, the students will learn how to accomplish the following tasks:

By completing this practical, the students will learn how to accomplish the following tasks: By completing this practical, the students will learn how to accomplish the following tasks: Learn different ways by which styles that enable you to customize HTML elements and precisely control the formatting

More information

CSS. Lecture 16 COMPSCI 111/111G SS 2018

CSS. Lecture 16 COMPSCI 111/111G SS 2018 CSS Lecture 16 COMPSCI 111/111G SS 2018 No CSS Styles A style changes the way the HTML code is displayed Same page displayed using different styles http://csszengarden.com Same page with a style sheet

More information

Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3

Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3 http://www.gerrykruyer.com Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3 In this task you will continue working on the website you have been working on for the last two weeks. This week

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

HTML & CSS November 19, 2014

HTML & CSS November 19, 2014 University of Nebraska - Lincoln DigitalCommons@University of Nebraska - Lincoln Digital Humanities Workshop Series Center for Digital Research in the Humanities 11-19-2014 HTML & CSS November 19, 2014

More information

Part 3: Images & form styling NOMZAMO S WEBSITE

Part 3: Images & form styling NOMZAMO S WEBSITE Part 3: Images & form styling NOMZAMO S WEBSITE 1 OUR MISSION: In this lesson, we ll learn 3 new things 1. How to include the logo image 2.How to add background image 3.How to style the email input form

More information

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial

More information

HTML & CSS Cheat Sheet

HTML & CSS Cheat Sheet 1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and

More information

HTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources

HTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources HTML + CSS ScottyLabs WDW OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML - HyperText Markup Language Specifies webpage content hierarchy Describes rough layout of content

More information

Web Engineering CSS. By Assistant Prof Malik M Ali

Web Engineering CSS. By Assistant Prof Malik M Ali Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a

More information

7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6. Phone: Toll Free: Fax:

7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6. Phone: Toll Free: Fax: HTML and CSS 7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6 Phone: 905-479-3780 Toll Free: 877-479-3780 Fax: 905-479-1047 e-mail: info@andarsoftware.com Web: www.andarsoftware.com.com Copyright

More information

Introduction to Cascading Style Sheet (CSS)

Introduction to Cascading Style Sheet (CSS) Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style

More information

Cascading Style Sheet. Styles as Tag Attributes. Syntax. <h1>: what font type/size is used? STYLE = SELECTOR {RULES} Attributes such as bgcolor

Cascading Style Sheet. Styles as Tag Attributes. Syntax. <h1>: what font type/size is used? STYLE = SELECTOR {RULES} Attributes such as bgcolor Styles? Cascading Style Sheet http://www.eie.polyu.edu.hk/~nflaw/biclustering/index.html Request string: GET /~nflaw/biclustering/index.html HTTP/1.1 Host: www.eie.polyu.edu.hk 1 Response string: HTTP/1.1

More information

Chapter 3 Attractive Web Designing

Chapter 3 Attractive Web Designing Chapter 3 Attractive Web Designing Theory Part 1. What is a style in a Web page? The tags, attributes and page layout used to make contents of the web page attractive can altogether be called its Style.

More information

COMP519 Web Programming Lecture 6: Cascading Style Sheets: Part 2 Handouts

COMP519 Web Programming Lecture 6: Cascading Style Sheets: Part 2 Handouts COMP519 Web Programming Lecture 6: Cascading Style Sheets: Part 2 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University

More information

SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS

SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS SEEM4570 System Design and Implementation Lecture 1 Cordova + HTML + CSS Apache Cordova Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript E.g.

More information

CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS

CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS Goals CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS Practice writing HTML Add links and images to your web pages Apply basic styles to your HTML This lab is based on

More information

CSS Lecture 16 COMPSCI 111/111G SS 2018

CSS Lecture 16 COMPSCI 111/111G SS 2018 No CSS CSS Lecture 16 COMPSCI 111/111G SS 2018 Styles Astyle changes the way the HTML code is displayed Same page displayed using different styles Same page with a style sheet body font-family: sans-serif;

More information

A Balanced Introduction to Computer Science, 3/E

A Balanced Introduction to Computer Science, 3/E A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is

More information

Web Design and Application Development

Web Design and Application Development Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 01 A. Al-Tamimi 1 Lecture Overview

More information

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External

More information

Block & Inline Elements

Block & Inline Elements Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not

More information

Review Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>

Review Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em> Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. 2. 3. 4. Review Question 1 Which tag is used to create a link to another page? 1. 2.

More information

week8 Tommy MacWilliam week8 October 31, 2011

week8 Tommy MacWilliam week8 October 31, 2011 tmacwilliam@cs50.net October 31, 2011 Announcements pset5: returned final project pre-proposals due Monday 11/7 http://cs50.net/projects/project.pdf CS50 seminars: http://wiki.cs50.net/seminars Today common

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

Assignments (4) Assessment as per Schedule (2)

Assignments (4) Assessment as per Schedule (2) Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like

More information

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!

More information

Cascading Style Sheets. Overview and Basic use of CSS

Cascading Style Sheets. Overview and Basic use of CSS Cascading Style Sheets Overview and Basic use of CSS What are Style Sheets? A World Wide Web Consortium (W3C) defined standard A way for web page designers to separate the formatting of a document from

More information

epromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION

epromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION epromo Guidelines HTML Maximum width 700px (length = N/A) Image resolution should be 72dpi Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than

More information

Introduction to Web Technologies

Introduction to Web Technologies Introduction to Web Technologies James Curran and Tara Murphy 16th April, 2009 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET

More information

1 Creating a simple HTML page

1 Creating a simple HTML page cis3.5, spring 2009, lab I.3 / prof sklar. 1 Creating a simple HTML page 1.1 Overview For this assignment, you will create an HTML file in a text editor. on a PC, this is Notepad (not Wordpad) on a Mac,

More information

11. HTML5 and Future Web Application

11. HTML5 and Future Web Application 11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21/ Week 3 Slide 1 of 16 Week 3 Agenda

More information

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for

More information

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Tutorial 4 Activities Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Ensure that the editor is in code mode, down the bottom

More information

APPLIED COMPUTING 1P01 Fluency with Technology

APPLIED COMPUTING 1P01 Fluency with Technology APPLIED COMPUTING 1P01 Fluency with Technology Cascading Style Sheets (CSS) APCO/IASC 1P01 Brock University Brock University (APCO/IASC 1P01) Cascading Style Sheets (CSS) 1 / 39 HTML Remember web pages?

More information

HTML. Based mostly on

HTML. Based mostly on HTML Based mostly on www.w3schools.com What is HTML? The standard markup language for creating Web pages HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup

More information

COMP519 Web Programming Autumn Cascading Style Sheets

COMP519 Web Programming Autumn Cascading Style Sheets COMP519 Web Programming Autumn 2015 Cascading Style Sheets Content vs. Presentation Most HTML tags define content type, independent of how that content is to be presented. There are a few obvious exceptions

More information