HTML Coding A new language.

Slides:



Advertisements
Similar presentations
Intro to HTML Basics HTML = Hypertext Mark-up Language HTML = Hypertext Mark-up Language HTML is a plain-text file that can be created using a text editor.
Advertisements

Learning the Basics – Lesson 1
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
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.
Structure and formatting HTML pages Helen Treharne Department of Computing.
ETT 429 Spring 2007 Web Design I.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
Explanation of Web 6, Web 7 and Web 9 at my site Please be sure to bring up the speaker notes for the explanation Intro - Web 6, Web 7 and Web 9.
Link and Table in HTML. Statistics HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML.
Creating Web Pages with Links, Images, and Formatted Text.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
CSI315CSI315 Building Web Sites. What is a website A website is just a bunch of web pages connected together with something called a link. In HTML there.
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.
Web Technologies Website Development Trade & Industrial Education
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
Understanding HTML Code
CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Images in HTML PowerPoint How images are used in HTML.
Website Development with Dreamweaver
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Doing L I N K S Links 1: Internal Links Links to anchors on the current page (Internal).
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
How to use Microsoft Word. Where can I find Microsoft Word? How to select, copy and paste information Go to the document from which you wish to copy the.
HTML: Hyptertext Markup Language Doman’s Sections.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Tutorial 3 Adding and Formatting Text with CSS Styles.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
Paper 3 Unit 15 – Web Authoring Software Choices Graphics Exporting Graphics Creating CSS RGB Colour CSS – Body, Table and TD Border Collapse Tables -
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
REEM ALMOTIRI Information Technology Department Majmaah University.
Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.
Chapter 5 BIE2313 | Web design. ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of.
CHAPTER TWO HTML TAGS. 1.Basic HTML Tags 1.1 HTML: Hypertext Markup Language  HTML stands for Hypertext Markup Language.  It is the markup language.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.
HTML for web designing short course. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file must have an htm or html file extension.
HTML Hyper Text Markup Language. What is HTML HTML stands for the Hyper Text Markup Language. HTML stands for the Hyper Text Markup Language. HTML is.
HTML Basics.
Images, Hyperlinks, and Sound
Images in HTML PowerPoint How images are used in HTML
Learning the Basics – Lesson 1
Lecture 3 Sarsenova Zhibek.
USING DREAMWEAVER Contents: Assigning a Root Folder
Images & Hyperlinks.
Enhance your website.
Computers and Scientific Thinking David Reed, Creighton University
Images, Hyperlinks, and Sound
Enhancing Your Web Site—Adding Links Web Page
HTML & CSS 7 Languages in 7 Days.
HTML LINKS
Images in HTML PowerPoint How images are used in HTML
IDT Links in HTML What you need to know….
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

HTML Coding A new language

Intro Tags Text Lists & Tables Fonts

Code Words Text Structure Character Formatting Paragraphs Paragraph Alignment Force Line Breaks

Code Words Lists Tables Ordered Lists Unordered Lists Headings Rows Data

Code Words Fonts Size Typeface Color

Help HTML Tutorials by John Gilson HTML Goodies Learn to Code HTML & CSS 30 HTML Best Practices for Beginners

Images

Intro What is it? Getting your image Inserting Moving Resizing Cropping

What is it? Images are a way to enhance Convey messages without words Focus points

Getting Your Image Sources Pictures taken Pictures on the web Make sure you get permission before publishing Screen capture Supplied images “Paint” creations

Inserting Inserting Images with HTML Editors Depending on which HTML editor you buy, you’ll have two choices for adding images: Visual editor: If you have a visual editor, you can simply drag and drop the image where you want it, or click the “insert image” quick link. Text editor: If you have a text editor, you add <img src=”filename” /> where you want the image to go.

Moving Automatic Manual Drag to desired location Move location in code Works in some editors Manual Move location in code <img src="yourImageUrl.jpeg" style="position: absolute; top: 10px; left: 10px;"/>  In that code, yourImageUrl.jpeg would be placed 10px from the top and 10px from the left.

Resizing With both choices, you want to make sure a height, width and alternate text is set. For example, if your image is 500 pixels wide and 150 pixels tall, your code should look like this: <img src=”filename” height=”150” width=”500” alt=”” /> In the quotes of the alt, give your image a name or description. Keep in mind that blind users will be hearing this description, so don’t just call it “image.”

Cropping Resize to fit location Done in an image editor prior to placement Best place here…powerpoint Open powerpoint On blank slide paste in image Right-click on image Select crop tool Crop image

Hyperlinks There are three different kinds of links you can have on your website: Links to anchors on the current page (Internal). Links to other pages within the current site (Local) Links to pages outside the current site (Global).

How You simply: Specify the target in the <a href=" ">. Then add the text that should work as a link. Finally add an </a> tag to indicate where the link ends.

Make It Different Define colors for all links on the page The general color of text links is specified in the <body> tag, like in the example below: <body link="#C0C0C0" vlink="#808080" alink="#FF0000"> link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF). vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080). alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

Make It Different Define colors for individual links on the page You might want one or more links to have different colors than the rest of the page Placing font tags between the <a href> and the </a> tag. This method will work on all browsers except MSIE 3. Click <a href="http://www.yahoo.com"><font color="FF00CC">here</font></a> to go to yahoo. Using a style setting in the <a> tag. This method works on MSIE3 and newer browsers. Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a> to go to yahoo. 

Links In A New Page To open in another window or frame than the link itself is placed in.  To do this you simply add a target="" to the <a href>. This example will open yahoo in a new window: <a href="http://www.yahoo.com" target="_blank">  Predefined targets are: _blank loads the page into a new browser window. _self loads the page into the current window. _parent loads the page into the frame that is superior to the frame the hyperlink is in. _top cancels all frames, and loads in full browser window.

The Underline or “Hover” The A:hover tells the browser that when the mouse is over a link the underline should appear Example: <html> <head> <title>This is my page</title> <style type="text/css"> <!-- A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline}

Example (cont.) --> </style> </head> <body> Welcome to my world!<br> <a href="http://www.yahoo.com">This Link To Yahoo has no underline</a> </body> </html> 

The Underline To turn off the effect for just a single link, add a style property to the<a href> tag: <a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a>

Putting It All Together <html> <head> <title>This is my page</title> <STYLE TYPE="text/css"><!-- A.set1:link {color: #FF00FF; } A.set1:active {color: #FFFF00; } A.set1:visited {color: #00FFFF; } A.set2:link {color: #AA00FF; background: FF00AA; text-decoration: none} A.set2:active {color: #FF00AA; background: none transparent;} A.set2:visited {color: #FFFF00; text-decoration: none} --></STYLE> </head> <body> Welcome to my world!<br> <a href="http://www.yahoo.com CLASS=set1> Yahoo </a> <a href="http://www.hotbot.com CLASS=set2> Hotbot </a> </body> </html> 

Email Links Email links are done much the same as links to other pages, using the <a href> tag. An email link would require the following code: <a href="mailto:youremailaddress">Email Me</a> This will result in the visitor's email program opening a new email with your address already in the To: field. If you wish to have a specific subject in the email, you can add it to the html code using subject= setting : <a href="mailto:email@echoecho.com?subject=SweetWords"> Send Email</a>

Email Links Suppose you want an email link for your visitors containing specific text in the body of their message, simply add &body=: <a href="mailto:email@echoecho.com?body=Please send me a copy of your new program!">Send Email</a> Or combine all the options and allow your visitor to send email with the address, subject and text already entered. <a href="mailto:email@echoecho.com?subject=SweetWords &body=Please send me a copy of your new program!">Email Me</a>