MA10126 Introduction to HTML Gavin Shaddick www.bath.ac.uk/~masgs/ma10126.html.

Slides:



Advertisements
Similar presentations
Math Introduction to HTML Gavin Shaddick
Advertisements

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Teppo Räisänen LIIKE/OAMK 2010
CPSC 203 Introduction to Computers Tutorial 59 & 64 By Jie (Jeff) Gao.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
XP Adding Hypertext Links to a Web Page. XP Objectives Create hypertext links between elements within a Web page Create hypertext links between Web pages.
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
Basic HTML Workshop Session 1: Introduction to HTML Fall 2006.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
HTML Introduction HTML
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Basic HTML Workshop Session 1: Introduction to HTML Fall 2006.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.
Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
1 Essential HTML coding By Fadi Safieddine (Week 2)
 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.
 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.
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.
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.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
15.1 Fundamentals of HTML.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.
Introduction to HTML. Slide 1 Hard-Coding What is hard-coding? –Creating the page in a text editor just using HTML A Web designer should know how to hard-
HTML Codes Miss B.
IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure
1 Week 1 l HTML l Applets Applets and HTML. 2 Overview l Applets: Java programs designed to run from a document on the Internet l HTML: Hypertext Markup.
1 Labels and Tags October 14, Grammar A set of components and rules that define a method/means of communication among objects. Components are.
HTML Internet Basics & Beyond. What The Heck Is HTML? HTML is the language of web pages. In order to truly understand HTML, you need to know a little.
Chapter 13. Applets and HTML HTML Applets Computer Programming with JAVA.
1 Creating Web Pages Part 1. 2 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide.
Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.
1 © Copyright 2000 Ethel Schuster The Web… in 15 minutes Ethel Schuster
Lec.10 + (Chapter 8 & 9) GUI Java Applet Jiang (Jen) ZHENG July 6 th, 2005.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
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.
2.1 XHTML. Motto High thoughts must have high language. –Aristophanes.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML – The Basics COE 201- Computer Proficiency. The Internet The World Wide Web ▫Also known as the Web ▫Created in 1989  European Laboratory for Particle.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.
Introduction lab1. Suzanne J. Sultan 2 What is HTML? The definition of HTML is Hyper Text Markup Language. HTML is a computer language devised to allow.
Creating Your 1 st Web Page. Tags Refers to anything between on a webpage Most appear in pairs surrounding content Some appear as empty tags (no closing.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.
Online PD Basic HTML The Magic Of Web Pages
Introduction to HTML.
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
CSCI-235 Micro-Computers in Science
Introduction to XHTML.
COMS 161 Introduction to Computing
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
Introduction to HTML.
Document Structure & HTML
MA10126 Introduction to HTML
Presentation transcript:

MA10126 Introduction to HTML Gavin Shaddick

Web addresses URL - Uniform Resource Locator "protocol://address" protocol is something like http, gopher, FTP, telnet address is merely the server and pathname (if any) of a given resource or page For example,

What is HTML? HTML – “hypertext mark up language” a format that tells a computer how to display a web page in a browser, e.g Explorer, Netscape. The documents themselves are plain text files with special "tags" or codes that a web browser knows how to interpret and display on your screen.

Where do you create HTML files ? Any text editor program capable of creating plain text files e.g. emacs, pico or even notepad in windows. Dedicated HTML editor or generator, e.g. Frontpage You cannot guarantee that your document will appear to other people exactly as it does to you.

Tags HTML is composed of tags. HTML tags are always enclosed in angle- brackets, Tags typically occur in begin-end pairs. These pairs are in the form...

Begin-end tags

Document tags The first and last tags in a document should always be the HTML tags If you were to load such a page into a Web browser, it wouldn't do anything except give you a blank screen

Heads and titles HEAD –contain all of the document's header information, e.g. title TITLE –This will appear at the top of the browser's title bar, and also appears in the history list. –Will also go into a bookmark list Document Title

Body BODY comes after the HEAD structure. Between the BODY tags, you find most of the content that gets displayed in the browser window. This appears in the browser window

First web page MA HTML This appears in the browser window

Putting it all together

Comment Tags If you want to leave yourself notes in an HTML document, but don't want those notes to show up in the browser window you do need an exclamation point after the opening bracket, but not before the closing bracket. there is no end tag, i.e. This is an empty tag

Headings Used to set apart document or section titles. There are six levels of headings, from Heading 1 through Heading 6. Heading 1 (h1) is "most important" and Heading 6 (h6) is "least important." Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Paragraphs The beginning of a paragraph is marked by, and the end by. Paragraphs can often be far too long, wandering on with no clear sense of direction or purpose, boring the reader to sleep and obscuring the point of the message contained within the text. On the other hand, they can be pretty short. Really short.

Line break If you want to end a line after a certain word, but don't want to start a new paragraph Use the tag There is no tag – another empty tag If you want to force a line break for some reason, but it doesn't make sense to start a new paragraph, then you can use the line break tag just as I will do at the end of this sentence. See the forced display on the next line? How about there? Or there?

Hyperlinks HREF stands for "Hypertext REFerence” Have you seen the Bath home page Click here to see this example

Images Images are placed in Web documents using the IMG tag, Kept in separate files Use a SRC attribute - "source" Can be a web address or a file

Creating your own home page on BUCS Run the mkhome command on UNIX server Creates a basic home page (ie name, postal address, phone & fax numbers and address). Home page is called index.html Created in a directory called public_html in your UNIX home directory Also accessible on H drive under public_html

Your homepage on the web Once you've created your personal home page it will be added to the list of all personal home pages at Bath URL: index.html will be the first page that opens This facility is provided as a personal privilege and should not be abused