HTML & CSS. Lesson 1: HTML Basics Lesson 2: Adding Tables Lesson 3: Intro to CSS Lesson 4: CSS in more detail Lesson 5: Review
|
|
- August Chandler
- 6 years ago
- Views:
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 Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationINTRODUCTION 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 informationHtml 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 informationCREATING 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 informationThree 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 informationOverview. 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 informationADDING 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 informationStudy 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 informationCSS 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 informationWeb 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 informationCSS: 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 informationWelcome 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 informationHTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
More informationWhich 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 informationLab 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 informationWeb 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 informationDownloads: 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 informationChapter 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 informationUNIX 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 informationCreating 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 informationWeb 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 informationDiploma 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 informationTitle: 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 informationCSS 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 { color: #996600; height: 3in; width: 12in; position: fixed; What is CSS? Cascading Style Sheets CSS is responsible
More informationCSS: 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 informationLesson 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 informationDAY 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 informationHTML & 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 informationITNP43: 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 informationThe 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 informationTEST 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 informationHow 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 informationICT 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 informationCS 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 informationHTML 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 informationCOMS 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 informationMPT 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 informationWeb 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 informationCSC 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 informationCSS. 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 informationCSS 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 informationWeb 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.
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 informationTutorial. 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 informationHyper 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 informationICT 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 informationBasic 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 informationrecall: 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 informationCS134 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 informationIndex. 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 informationCreating 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 informationMake 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 informationWeb 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 informationHTTP & 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 informationUnit 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 informationHTTP 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 informationIn 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 informationThe 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 informationWhat 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 informationLab 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 informationBy 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 informationCSS. 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 informationTeach 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 informationCSS 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 informationHTML & 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 informationPart 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 information5 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 informationHTML & 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 informationHTML + 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 informationWeb 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 information7300 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 informationIntroduction 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 informationCascading 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 informationChapter 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 informationCOMP519 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 informationSEEM4570 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 informationCS 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 informationCSS 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 informationA 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 informationWeb 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 informationUnit 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 informationBlock & 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 informationReview 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 informationweek8 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 informationWanted! 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 informationAssignments (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 informationIntroduction 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 informationCascading 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 informationepromo 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 informationIntroduction 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 information1 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 information11. 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 informationCreating 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 informationHTML. 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 informationTutorial 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 informationAPPLIED 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 informationHTML. 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 informationCOMP519 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