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.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
Build Your Own Webpage Code Academy.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Using Advanced Cascading Style Sheets
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
 Share assignments and files  Student and parent home access  Announcements  Classroom information.
Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For.
NMED 3850 A Advanced Online Design February 1, 2010 V. Mahadevan.
  Adds “Share” button to any webpage  Add it to a template page so it’ll be on every page  Select.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.
CHAPTER 8: Enhancing a Website Session 1. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your.
Creating Tables in a Web Site Using an External Style Sheet
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.
® IBM Software Group © 2006 IBM Corporation Creating JSF/EGL Template Pages This section describes how to create.JTPL (Java Template Pages) using the Page.
Chapter 3. Table have many uses in a HTML design but are mostly used for the organization of your web site. Tables also give vertical and horizontal structure.
Introduction to Web Development in HTML Web module day 1 IS 201.
Exploring Microsoft Office XP - Microsoft Word 2002 Chapter 61 Exploring Microsoft Word Chapter 6 Creating a Home Page and Web Site By Robert T. Grauer.
Exploring Word Grauer and Barber 1 Committed to Shaping the Next Generation of IT Experts. Chapter 6: Introduction to HTML: Creating a Home Page.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Define html document byusing Example : Title of the document The content of the document......
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
LOGO Website code presentation Software Group Project :: First project Prepared By Abdullah Mustafa Abu Nada Hussian Abd-Jaleel Shaalan
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
Chen Raz Requirements: 1. HTML5/CSS3 (I remind you that we have an agreement that you don't charge me extra for this) 2. Do not use the html element 3.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Creating your Webpage with tables. This is a 2 column by 1 row table!
CREATING A SHELL FOR YOUR WEBSITE. Create Website plan (see previous) Refer to/revise website plan as needed Create a folder to place ALL WORK: web pages,
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
Page 1 Simple PowerPoint Menus Section 1 Section 3 Section 2 Tutorial.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Website Development with Dreamweaver
(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Designing Web Sites Using “tags” Tags are codes inserted among the text to tell the text how to behave Their format is very rigid; they always look like.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
More WordPress Kathy E Gill 3 February What Is WordPress?  A content management system.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science
Scripting Language A scripting language or script language is a programming language that supports the writing of scripts. The term script is typically.
Start Dreamweaver program From file menu click new Blank page appears.
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
Colors & Fonts Building a Website Lesson 7. Font Font The tag specifies the font face, font size, and color of text. The tag can have any or all of these.
 Computer use language to communicate  A web browser will read these tags and translate it into what you actually see  Viewing Code of ESPN WebsiteESPN.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Coding with HTML/CSS Quiz { } Play as a PowerPoint slideshow for answers.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.
Advanced Elements & Advanced HTML Codes AGCJ 407.
Do you want to make info graphics for the US Election?
Unit 3 – Web design Final Project
Unit 2, Lesson 5 Website Development Tools
Unit 2, Lesson 5 Website Development Tools
Lesson 4 – Introduction to CSS
Making Web pages.
HTML Links.
CSS Styles Introduction.
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Unit 10 The Web Book Test.
One Set of Styles Connected to As Many Pages as You Want!!!
How to add a photo gallery in html/css
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.
Presentation transcript:

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 images So what’s next??

LINKS

A link  In order to add a link to a website we have to use another tag called the a tag Some text of the link

Menus  A great way to provide links to users of the site is through a menu. Vertical Menu Horizontal Menu

The HTML The BBC Twitter Facebook The code Output

Lets make it look good Using CSS we can change the look and feel of the list, to make it more like a menu. It only needs a couple of lines in CSS The CSS