Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.

Slides:



Advertisements
Similar presentations
Source: ojects/tabber/ ojects/tabber/
Advertisements

Chapter 2 HTML Basics Key Concepts
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.
 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
Art 128 Interface Programming 1 In-class Presentation Week 11B.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Define html document byusing Example : Title of the document The content of the document......
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file names. File names ARE.
HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
WRA HTML & CSS – BUILDING WEBPAGES. TODAY’S AGENDA Review: external stylesheets Review: transforming a list Intro: the object Intro: the.
Moving Boxes The CSS ‘box’ Model and moving elements around the page 1.
HTML.
Things we’ve covered so far  Basic HTML  Some advanced tags i.e.  Styling using CSS  Background-color  Text  Changing the font on your site  Inserting.
L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
Unit 5 The Web Book Test. Unit 5 Test The Web Book Test 1. On the bottom of page 46, why is writing web pages not like writing printed documents ?
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Before We Begin Please download the files from as we will be using them in our walkthroughs.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
Anatomy of a Website Adobe Dreamweaver. Overview When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser.
Week 1: Introduction to HTML and Web Design
Getting Started with HTML
Introduction to CSS: Selectors
HTML.
MIT 511- Web Design & Usability
Web Design Unit 5.
CSS Nick Sims.
Web Systems & Technologies
Dreamweaver – Setting up a Site and Page Layouts
CSS HTML and website development.
CSS Layouts: Positioning and Navbars
Web Development & Design Foundations with HTML5 8th Edition
>> Introduction to CSS
>> Header & Footer in CSS
HTML 101.
1-Edit> prefrence> new document> select HTML5
Intro to Web Development Class A Review
Links. Links Links Need to define two things: The destination Something to click on to get there Tag is click here Can be text, special.
Style should be done using CSS.
CSS.
Google Fonts Selective Formatting
Laying out a website using CSS and HTML
Intro to CSS Mr. Singh.
Creating a Webpage with External CSS
HTML What is it? HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.
Unit 2 Test Building a Web Page Test.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
HTML: Pages and Tools.
The language of the internet
The language of the internet
Multipage Sites.
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Web Programming and Design
Unit 13: Website Development
One Set of Styles Connected to As Many Pages as You Want!!!
Presentation transcript:

Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.

Wireframe Wireframe is a way to layout your webpage with some of the things that html5 does. There are new things besides body and header. There are headers, navs, main, footer, etc.

This is the layout of a webpage. It sets up what will go where. Sample Wireframe This is the layout of a webpage. It sets up what will go where.

Header Sample site: Nav Main Footer

New HTML CODE! Add this to your code

the <head> tag contains all the things like, meta tags, title tags, and css style calls the <header> creates a space for the title of your page.

Nav Tag - this sets up a place for links Nav Tag - this sets up a place for links. This one is for internal links (links to other pages on your website) Special character that creates a blank space Link What you see

main tag - this is where the main part of your page is located.

div tag - this is where things go that are not part of a header, main or footer.

footer tag - This resides at the bottom of the page footer tag - This resides at the bottom of the page. Things like email tags, links to FAQ pages, etc.

Add common symbols to html output