Intro to HTML Kin 260 Jackie Kiwata.

Slides:



Advertisements
Similar presentations
3.02D HTML Overview 3.02 Develop webpages.
Advertisements

HTML Basics 1450 Technology Seminar Copyright 2003, Matthew Hottell.
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.
Internet Applications Development Lecture 2 L. Obead Alhadreti.
Dr. Alexandra I. Cristea XHTML.
WeB application development
Website Design.
A guide to HTML. Slide 1 HTML: Hypertext Markup Language Pull down View, then Source, to see the HTML code. Slide 1.
How Tags are used to form your Web Page
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
Made by: Dan Ye. Introduction Basic Last Page ☆ HTML stands for Hyper Text Markup Language; ☆ HTML is not a programming language, it is a markup language;
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Marking Up With Html: A Hypertext Markup Language Primer
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
Computer Sciences Department
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Creating a Basic Web Page
DAT602 Database Application Development Lecture 14 HTML.
_ HTML, XHTML & CSS Sami Niemelä | Module 1: Introduction to digital media: Day 02.
CS 299 – Web Programming and Design Introduction to HTML.
HTML (HyperText Markup Language)
HTML Structure & syntax
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
CS134 Web Design & Development Creating a Basic Web Page Mehmud Abliz.
1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and.
>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.
HTML INTRODUCTION, EDITORS, BASIC, ELEMENTS, ATTRIBUTES.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
CSCI 1101 Intro to Computers 7.1 Learning HTML. 2 Introduction Web pages are written using HTML Two key concepts of HTML are:  Hypertext (links Web pages.
Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.
XHTML and CSS Session 1 Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process, basic XHTML elements.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
HTML Basics Let’s Make a Web Page. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a.
WEB APPLICATION DEVELOPMENT For More visit:
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
HTML file format  Lesson Objective: Understanding HTML and how it is used to create web pages.  Learning Outcome:  Create a HTML page by interpreting.
1 Introduction to XML XML stands for Extensible Markup Language. Because it is extensible, XML has been used to create a wide variety of different markup.
Lecture: Web Design Assis. Prof. Freshta Hanif Ehsan Faculty of Computer Science Kabul Polytechnic University Spring Semester
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
HTML Basic. 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.
HTML Hyper Text Markup Language 1BFCET BATHINDA. Definitions Web server: a system on the internet containing one or more web site Web site: a collection.
Introduction to HTML Year 8. What is HTML O Hyper Text Mark-up Language O The language that all the elements of a web page are written in. O It describes.
Jozef Goetz, STEM Summer Camp Dr. Jozef Goetz.
Unit 3 — Advanced Internet Technologies Lesson 11 — Introduction to XSL.
XML The Extensible Markup Language (XML ), which is comparable to SGML and modeled on it, describes how to describe a collection of data. A standard way.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
XP 1 HTML Tutorial 1: Developing a Basic Web Page.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Intro to HTML.  Hypertext markup language (HTML) is a way of telling web browsers how to display a page  You can type them by hand in a word processing.
Basic HTML Introduction to HTML.
Web Basics: HTML/CSS/JavaScript What are they?
XHTML/CSS Week 1.
3.00cs HTML Overview 3.00cs Develop webpages.
Introduction to XHTML.
WEBSITE DESIGN Chp 1
Marking Up with XHTML Tags describe how a web page should look
Introduction to HTML5.
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
Web Application Development
AN INTRODUCTION BY FAITH BRENNER
Presentation transcript:

Intro to HTML Kin 260 Jackie Kiwata

Overview HTML Defined Syntax Structure Content Posting Online

What is HTML? Stands for Hyper Text Markup Language The glue that holds the content on a web page together Every page on the web is created in HTML, or some variant of it

HTML Files Merely text files that contain hyperlinks and markup HTML instructions that dictate how the web page is displayed Read by browsers But each web browser interprets HTML in its own way With basic HTML, variances aren’t significant But pages with advanced elements like multimedia and scripting can get hairy

XHTML The new and improved version of HTML Based on XML Extensible Markup Language Works well with software and the Internet Irregularities in HTML cause problems for software, so XHTML bridges the gap between software and web pages Most HTML and XHTML markup is identical Eventually, XHTML will replace HTML, but HTML is still going strong

HTML Syntax 3 aspects to HTML markup: 1. Elements 2. Attributes - Identify different parts of an HTML page by using tags 2. Attributes - Information about the instance of the element 3. Entities -Symbols like copyright (©) and accented letters (è)

Elements The building blocks of HTML Use elements to describe every piece of text on web pages Made up of tags and content between tags e.g. <p></p> <img> <body></body>

Tags Mark the beginning and sometimes the end of an element (tag pair) Elements that describe a page’s structure always use tag pairs <p>Welcome to the Kin 260 page!</p> <p> tells the browser, “The paragraph begins here”. </p> tells the browser, “The paragraph ends here.”

Tags, con’t. Elements that insert something into a page use single tags Don’t enclose content <img src=“football.jpg” width=“75” height=“100”> The <img> element references an image When the browser displays the page, it replaces <img> with the file “football.jpg”

Attributes Allow variety in how an element is displayed or functions Syntax is: <tag attribute=“value” attribute=“value> Example <img src=“football.jpg” width=“100” height=“100”> <img is a flag to the browser to insert an image, while the attributes tell the browser how to display the image

Entities Special characters that can be displayed on web pages Begin with an ampersand (&) and end with a semicolon (;) e.g. To display è in the browser, need to use ´ <p>Montr´al</p> List of HTML entities: http://www.w3schools.com/tags/ref_entities.asp

Comments Good programming practice to use comments in code to explain code functionality Comments are not displayed in the final web page Begin comment with the string <!-- End comment with the string -->

Structure of HTML Document HTML version declaration <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Contains info about the page’s HTML version Header section <head></head> Contains info about web page Body section <body></body> Contains content of web page

Example of HTML Structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </P> </BODY> </HTML>

HTML Version Declaration At the top of every html document, must have this declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> The declaration creates a valid HTML page The declaration also tells the browser what version of HTML to support

The Head Element Header that provides basic information about the document Always enclosed inside <html></html> Contains title and metadata Data that describes the page List of keywords <head> <title>Kin 260 Home Page</title> <meta name=“keywords” content=“kinesiology, undergraduate, computers, Excel, HTML”> </head>

The Body Element Holds the content of the web page Always enclosed inside <html></html> Always comes after the <head> element <html> <head> <title>Kin 260 Home Page</title> </head> <body> <h1>Welcome to Kin 260!</h1> </body> </html>

Ex 1 – 1st HTML page Download and save the HTML starter code Make the following changes: <head> <title>HTML</title> </head> <body> <h1>Hello World</h1> </body> </html> View the results in the browser

Saving your HTML file File > Save As Save as Type: All Files Encoding: ANSI File name: Example.html

Viewing your HTML page Find the file on your hard disk Open the file using your web browser If make a change to the html file, save in text editor, then refresh the page in the browser

Adding content to HTML pages Inside the <body>, use text blocks to further create structure Includes: Paragraphs Headings Lists Tables

Summary of Text Blocks Tag Description Example <p></p> Paragraph Most common block element used on pages <p>Kin 260 is a class for undergraduate Kin majors.</p> <h1></h1> <h2></h2> … <h6></h6> Headings and subheadings h6 is the smallest heading <h1>Welcome to the Kin 260 Home Page!</h1> <br> Line break Like hitting the Enter key <p>Today in Kin 260 … HTML!</p> <hr> Solid straight line <h1>Kin 260 Home</h1> <h2>Announcements</h2>

Ex 2 – Text Blocks Header One Create a web page that closely mirrors the following output: Hint: Use the starter code Header One Header Two HTML isn’t so bad after all.

Lists 2 main types: Bulleted and numbered Use within <body> Bulleted example: <ul> <li>First list item</li> <li>Second list item</li> </ul> <ul> stands for Unordered List Encloses the list <li> stands for List Item Use <li> for each list item

Lists, con’t. Numbered Example <ol> <li>First list item</li> <li>Second list item</li> </ol> <ol> stands for Ordered List Like <ul>, encloses the list Use <li> for each list item

Ex 3 - Lists Create a web page that closely mirrors the following output: To Do Grocery Shopping Workout Eggs Milk

Posting Your Pages Online 1. Need a web hosting provider to hold your web pages Last time, we used Google Sites Editor and Web Host Web host might be the university web server, your Internet Service Provider or a specialized web hosting service Usually, you pay your web host a monthly fee to act as your web server

Posting Your Pages Online (con’t.) 2. Use special software, called an FTP client, to upload files to the web server FTP client will make connection to web server, and you copy files from your hard drive to the server

+/- of using a Web Host + Use any domain you want Check www.godaddy.com to see if domain is available + Absolute control over folder paths, page content, layout Not free Must be proficient in HTML at the very least

Additional Info & References HTML Tutorial: http://w3schools.com/html/default.asp Tanenbaum, A. S. (2003). Computer Networks. Upper Saddle River, NJ: Prentice Hall Tittel, E. & Burmeister, M. (2005). HTML 4 For Dummies, 5th Edition. Indianapolis, IN: Wiley