©SoftMoore ConsultingSlide 1 Introduction to HTML: Text-Level Elements and Links.

Slides:



Advertisements
Similar presentations
HTML popo.
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.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
 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.
Marking Up With Html: A Hypertext Markup Language Primer
 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.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Creating and Editing a Web Page
Define html document byusing Example : Title of the document The content of the document......
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.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Introduction to Computers CS Dr. Zhizhang Shen Chapter 4: Talking.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
1 Labels and Tags October 14, Grammar A set of components and rules that define a method/means of communication among objects. Components are.
Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.
CS 3870/CS 5870 Web Protocols, Technologies and Applications.
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
Adding Images Learning Web Design: Chapter 7. Using an Image Images have many purposed on a Web site Used as a static image To add illustration: ex. A.
HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”
WEB DESIGN AND PROGRAMMING Introduction to XHTML.
Notes Chapter 10—Adding Graphics. There are two kinds of graphics on the Internet: those you can use on your own Web pages, and those you cannot.  Many.
HTML. Adding Background Color The bgcolor attribute lets you change the background color of the Web page. Located in the body tag See common Web Page.
Basic Webpage Design Mark-up html document with images.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
HTML Chapter 4 Source: CSE 190 M (Web Programming) lecture notes, es/slides/lecture02-basic_xhtml.html.
Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.
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.
Introduction to HTML C151 Multi-User Operating Systems.
Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.
Hypertext Markup Language.  Developed by Tim Berners-Lee in 1990  Stands for HyperText Markup Languange  A format that tells a computer how to display.
REEM ALMOTIRI Information Technology Department Majmaah University.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Lecture 8 Introduction to Web Programming. Announcement  First In-class exam will be on Oct. 10 (Wednesday)  2.50pm – 4.05pm  Exam will cover all materials.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.
TNPW1 Ing. Jiří Štěpánek.  Tags  Marks for elements ▪ Pair ▪ Start and end tag ( Paragraph text ) ▪ Single ▪ Only start tag, according to XHTML 1.0.
What is HTML? Acronym for: HyperText Markup Language
Marking Up with XHTML Tags describe how a web page should look
Images, Links and Multimedia
Hosted by Coach Slanina
Chapter 1: Introduction to XHTML (part 1)
Chapter 4 - Introduction to XHTML: Part 1
Creating a Web Site with Links
Computers and Scientific Thinking David Reed, Creighton University
HTML Introduction Lecture 8.
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Introduction to HTML- Basics
Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Hyperlinks, Images, Comments, and More…
Marking Up with XHTML Tags describe how a web page should look
Presentation transcript:

©SoftMoore ConsultingSlide 1 Introduction to HTML: Text-Level Elements and Links

Physical Style Tags Bold:... Italics:... Teletype (fix-width font):... Underline:... Subscript:... Superscript:... Bigger font size:... Smaller font size:... Strike through:... ©SoftMoore ConsultingSlide 2

©SoftMoore ConsultingSlide 3 Example: Physical Style Tags bold italic teletype underline strike through subscripts: H 2 0 superscripts: b 2 - 4ac bigger bold italic underline italic bold underline

©SoftMoore ConsultingSlide 4 The Link Tag Example SoftMoore Consulting Go back to Main Menu File to load when link is selected Opening Tag Text that will be highlighted Closing Tag “href” stands for “Hypertext REFerence.”

©SoftMoore ConsultingSlide 5 Relative Pathnames Relative pathnames point to file based on their locations relative to the current file. To specify relative pathnames in links, use UNIX-style pathnames regardless of the system you actually have. –directory or folder names are separated by forward slashes (/) –use two dots (..) for the directory “above” the current directory

©SoftMoore ConsultingSlide 6 Examples: Relative Pathnames href="file.html" href="files/file.html" href= "files/more/file.html" href="../file.html" href="../../files/file.html" located in current directory located in directory called “files” (which is located in the current directory located in directory “more”, which is located in directory “files”, which is located in current directory. located in the directory one level up from current directory (the “parent” directory) located two directory levels up, in the directory “files”

©SoftMoore ConsultingSlide 7 Absolute Pathnames Point to files based on the absolute location on the file system Start at the top of the web application directory hierarchy and work downward through all intervening directories to reach the file Prefix used to differentiate from relative pathnames –slash (“ / ”): when referring to a page in the current web application –“ ”: when referring to a page in a different web

©SoftMoore ConsultingSlide 8 Examples: Absolute Pathnames href="/files/file.html" href=" href=" located in directory “files” under the main application directory (independent of current directory) default file is used for this web application (usually index.html ) located in web application “x” in the directory “f”

©SoftMoore ConsultingSlide 9 Relative versus Absolute Pathnames Most of the time use relative pathnames instead of absolute pathnames within the same web application. Absolute pathnames are not portable when moving web pages to other locations. –same server –different server

©SoftMoore ConsultingSlide 10 Anchors Instead of just linking to the top of another document, you can set up link to a specific place within that document; e.g., to the third paragraph. Anchors are special places inside documents that can be linked to. Links can then jump to those special places inside the page as opposed to jumping just to the top of the page.

©SoftMoore ConsultingSlide 11 Example: Linking to an Anchor In “ u_csci.html ” CSCI 201 Link within the same document. Course description for CSCI 201 Link from a different document (relative link) CSCI 201 Note: Anchor names and links are case sensitive. Make sure that the anchor name used in the name attribute and the anchor name in the link after the # are identical.

©SoftMoore ConsultingSlide 12 Links and Images Typical image formats –GIF: Graphics Interchange Format –JPEG: Joint Photographic Experts Groups –others (PNG, TIFF, EPSF, etc.) The tag is used to inline images. Images can be used as link to documents. Up to Home

Text/Image Alignment Attributes align="top" : aligns the top of the image with the topmost part of the line. align="middle" : aligns the center of the image with the middle of the line align="bottom" : aligns the bottom of the image with the bottom of the line of text. align="left" : aligns an image to the left margin to a paragraph of text. align="right" : align an image to the right margin to a paragraph of text. ©SoftMoore ConsultingSlide 13

©SoftMoore ConsultingSlide 14 Alternative Text for Images <img src="arrowup.gif" align="bottom" alt="[UP]">