ECA 228 Internet/Intranet Design I HTML Tags. ECA 228 Internet/Intranet Design I anchor tags Adds a link to the web page Anything placed between the anchor.

Slides:



Advertisements
Similar presentations
Working with Images and HTML
Advertisements

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
HTML: HyperText Markup Language Hello World Welcome to the world!
Chapter 2 HTML Basics Key Concepts
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Web Development & Design Foundations with XHTML Chapter 4 Key Concepts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 4: Horizontal Rules and Graphical Elements.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Basic HTML tags Beginning Web Site Design Stanford University Continuing Studies CS 03
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 4: Horizontal Rules and Graphical Elements © 2007 Prosoft Learning Corporation All rights.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Images in HTML PowerPoint How images are used in HTML.
XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
HTML, Part Showing Pictures: The Image Tags Image Tag Format –src short for source –alt for text –Can use absolute or relative pathname.
Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox.
Creating Web Pages with Links, Images, and Formatted Text
1 Introduction to HTML: Part 1 Outline Introduction Elements and Attributes Editing HTML Common Elements Headers Images Unordered Lists Nested and Ordered.
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
HTML for ISD Brown Bag Presentation Session 2 What we will cover:  Basics of HTML  How to make your first page  Links  Text formatting.
WEB DESIGN AND PROGRAMMING Introduction to XHTML.
Suzanne Sultan1 Line Breaks, Paragraphs, lists Lab3.
1 Review of HTML Elements. 2 The tag These tags are marked as comments in HTML. Any text between these two comment tags will.
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
Internet Applications Development Lecture 4 L. Obead Alhadreti.
Note #2.  How does a structure of HTML document look like?  How do you align … A paragraph? A heading?  What is the main difference between one-sided.
HTML(Hyper Text Markup Language) ByNaveen. Introduction HTML or Hyper Text Markup Language is the standard markup language Its used to create the web.
Formatting Text with HTML. Objectives: Students will be able to: Define the structure of the document with block elements Format numbered, bulleted, and.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1 Start TextEdit. 2 Creating a Home Page  A home page is the main page of a Web site –Visitors usually view the home page first –Identify the purpose.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
REEM ALMOTIRI Information Technology Department Majmaah University.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
Create Your Own Web Page: An Introduction to HTML Instructor: Corey Johnson Assisted by: tba.
01 – HTML (1) Informatics Department Parahyangan Catholic University.
Part 4 Text & Fonts © UNT in partnership with TEA1IT: Web Technologies - HTML Scripting.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
HTML Basics.
Chapter 1: Introduction to XHTML (part 1)
CS543: WEB APPLICATION PROGRAMMING
Chapter 4 - Introduction to XHTML: Part 1
HTML Images CS 1150 Spring 2017.
Web Development & Design Foundations with HTML5 7th Edition
Introduction to HTML- Basics
HTML Images CS 1150 Fall 2016.
Attribute of heading, <p> and <hr> tag
Attribute of heading, <p> and <hr> tag
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.
Attribute of heading, <p> and <hr> tag
Presentation transcript:

ECA 228 Internet/Intranet Design I HTML Tags

ECA 228 Internet/Intranet Design I anchor tags Adds a link to the web page Anything placed between the anchor tags becomes a link Attributes – href – name – target Yahoo

ECA 228 Internet/Intranet Design I anchor tags cont … Links can be made from – text – image – list item To link to another web site use an absolute link To link to a page within your own site use a relative link To create an link use mailto: me

ECA 228 Internet/Intranet Design I font tags has been deprecated in favor of style sheets Attributes – face font name – size n, +n, or – n, where n equals number of points – color color name or rgb value Text

ECA 228 Internet/Intranet Design I image Used to place images on a web page 3 types of images can be used on a web page –.gif line drawings or large areas of color limited to 256 colors can be transparent can be animated

ECA 228 Internet/Intranet Design I image cont … types of supported images cont … –.jpg 16 million colors good format for photographs –.png not fully supported DO NOT use unsupported types of images –.bmp –.tif –.art

ECA 228 Internet/Intranet Design I image cont … Attributes – src path to image name – width width in pixels – height height in pixels – alt alternative, descriptive text – border integer value – align used to float image to either side of a web page

ECA 228 Internet/Intranet Design I image cont … Attributes cont … – vspace integer value to add space vertically – hspace integer value to add space horizontally

ECA 228 Internet/Intranet Design I ordered list creates a list of items using numbers or letters Designate ordered list using Place individual list items in tags Attributes – type 1 * default A i a

ECA 228 Internet/Intranet Design I unordered list creates a list of bulleted items Designate ordered list using Place individual list items in tags Attributes – type disc * default circle square

ECA 228 Internet/Intranet Design I nested lists Marley Halle o 5 years old o 63 lbs Boo Marley Halle 5 years old 63 lbs Boo

ECA 228 Internet/Intranet Design I definition list great for words and their definition or descriptions – opens list – contains the word or phrase to be defined – contains the definition

ECA 228 Internet/Intranet Design I definition list cont … Halle A five year old Golden Retriever Marley A ten year old Border Collie Halle A five year old Golden Retriever Marley A ten year old Border Collie

ECA 228 Internet/Intranet Design I quoting text – block level element – originally developed to indent large blocks of quoted text – generally indented by browsers – can be nested – used to quote text inline – can be nested

ECA 228 Internet/Intranet Design I text formatting – monospaced – preformatted – line-through – superscript – subscript

ECA 228 Internet/Intranet Design I divisions and spans – container tags used to designate blocks of material within a web page – block level element content starts on a new line – by itself, does nothing but add a line break – used with stylesheets, becomes a very powerful way to format blocks of code

ECA 228 Internet/Intranet Design I divisions and spans cont … – container tags used to identify spans of text or other inline elements – cannot block level elements – by itself, does nothing to the way a page renders in a browser – used with stylesheets, becomes a powerful way to apply style inline

ECA 228 Internet/Intranet Design I special characters CODE RENDERS non-breaking space &ampersand <less than sign >greater than sign "straight quotes ‘curly single quote ’curly single quote “curly double quote ”curly double quote