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.

Slides:



Advertisements
Similar presentations
Introduction to HTML. A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.
CHAPTER 8 ADVANCED CSS. LEARNING OBJECTIVES Assign formatting styles to a CSS class definition Use a tag’s class attribute to apply the styles defined.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
CSS Link Styling. The Anchor Element: Link text between the opening and closing can be styled using CSS. Some of the properties that can be set are: font-family,
Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.
Session 4: CSS Positioning Fall 2006 LIS Web Team.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links
กระบวนวิชา 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.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Design, Formatting, CSS, & Colors 27 February, 2011.
 Pseudo-elements  Centering  Tables  Classes and ids.
Server Web Server Pages Client Browser  Office Hours on Thursday › Diane’s are CANCELLED › Belinda will hold 11:00-12:00  Belinda will be teaching.
 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.
Design, Formatting, CSS, & Colors September 9, 2010.
 Page structure  Define the content › Text › Headers › Lists › Tables  Minor formatting.
13 February Building a Web Page. HTML Files Two types of information Text Instructions on how to display Instructions are in the form of tags Tags are.
Web Page Development Identify elements of a Web Page Start Notepad
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Doman’s Sections Information in this presentation includes text and images from
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
How to get there from here. Lesson 5 – Unit E. Library.
 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.
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
CLASSES REVIEW: HREF, CONTEXT, FILE STRUCTURE. BIG CAVEAT Never cut and paste from a Powerpoint slide Punctuation is not the same Note that the “ is curly.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Review Microsoft Word 2010 CS Edit and Format a Document  Open a previously saved document  Select text by  clicking,  clicking and dragging,
So far, we have looked at CSS selectors that correlate with HTML tags Now, we’ll see how you can define your own selectors using class and ID selectors.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Body and Heading Tags and their Attributes. Attribute Name DefinitionValues backgroundIndicates the background image of the Web page. Ex. Filename(path.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
 Look especially at › File Tips and Shortcuts › Student video.
HTML Links HTML uses a hyperlink to another document on the Web.
REEM ALMOTIRI Information Technology Department Majmaah University.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Selective Formatting. Auto Grader Multiple selectors  May use the same formatting for two elements h1, h2 { font-family: cursive; }  Maintains consistency.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.
Lecture 3 Sarsenova Zhibek.
Display Property.
Cascading Style Sheets
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.
Cascading Style Sheets
Unit F Inserting and Working with Links.
COMP 101 Review.
Google Fonts Selective Formatting
Links.
Inserting and Working with Links
Computers and Scientific Thinking David Reed, Creighton University
Links.
Presentation transcript:

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 week)  Can change the text format

 Always link to an anchor point  Implicit anchor point at top of page › Anchor referenced as null  Adding other anchor points › Insert named anchor point › id=“anchor” on any tag

 To point to an anchor point on SAME page link text top of page

 To point to an anchor point on SAME page link text top of page  In order to access anchor point on another page Link text

 Can use any formatting that you want  Links have states (visited or not, hovering)  Can change attributes for all states with a { Property: value; }

 Characteristics of tags that can have their own attributes  Not reflected in HTML  In CSS: tag:pseudo-element

Link states a:link -- a normal, unvisited link a:visited -- a link the user has visited a:hover -- a link when the user mouses over it a:active -- a link the moment it is clicked Note: CSS order important hover must come after link & visited active must come after hover LoVe HAte a:link { color: #FC5BD4; } a:visited { color: black; }

 Long pages › Avoid too much scrolling › Links to subsections › Link to top  Lots of topics › Use a “table of contents” of links

 Use full url Link text  To force open in a new tab (window) Link text GOOD PRACTICE REQUIRED IN THIS CLASS

 Header, includes › h1 title › Nav(igation)  Section or div for main body  Footer

 Paragraph in each section may want to look different › Smaller in header or footer  Lists › No bullets › In a line › Different spacing

 Name the context in the css by using a space header p { text-align: center; } footer p { text-align: right; }