IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure

Slides:



Advertisements
Similar presentations
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Advertisements

HTML Introduction CS 1020 – Lego Robot Design. Building Websites HTML (HyperText Markup Language)  The dominate language of the internet  Describes.
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 Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
HTML: HyperText Markup Language Hello World Welcome to the world!
Hypertext markup language.  Client asks for an html file  Server returns the html file  Client parses and displays it  This display is what most people.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.
Basic HTML Tags.
HTML Computing Concepts HTML - An Introduction 1.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
Creating a Simple Page: HTML Overview
Basic XHTML Module 2: XHTML Basics LESSON 1. Module 2: XHTML Basics LESSON 1 Lesson Overview In this lesson, you will learn to:  Write XHTML code using.
Using HTML to Create a Basic Web Page… By Josh Gallagan.
Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
Using HTML to Create a Basic Web Page… By Josh Gallagan.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
Introduction to HTML Today we will look at: Separating style and content The purpose of a text editor such as Notepad How web-pages are made Creating a.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
>> 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. 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.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
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.
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.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
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.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
Just Enough HTML How to Create Basic HTML Documents.
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.
Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.
HTML: Hyptertext Markup Language Doman’s Sections.
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.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
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.
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.
IDK0040 Võrgurakendused I harjutus 01: Introduction Deniss Kumlander.
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 Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created.
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.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
The Web Wizard’s Guide to HTML Chapter Two Basic Text Formatting.
1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.
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
CompSci 1 Lecture 2 HTML Webpages. Today’s Topics Basic HTML The basis for web pages “Almost” programming Upcoming Programming Java Reading Great Ideas.
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.
Introduction to HTML.
Computer Fundamentals 2
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
WJEC GCSE Computer Science
Presentation transcript:

IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure IS1824: Introduction to Internet Multimedia

IS1824 Today’s lecture  Continuous Assessment Part 1 and 2 details  Explaining our first webpage  HTML tags  Exercise

Continuous Assessment Part 1 Report due for 18/11/2014  50% of this part of IS1825  words  Identify 1 website whose design you feel is good  Identify 1 website whose design you feel is poor  For each website, describe what you like/don’t like in terms of Look and feel Navigation Language and tone Business role Audience focus

Continuous Assessment Part 2 MCQ scheduled in for 25/11/2014  50% of this part of IS1825  30 questions in 45 minutes  Negative marking will apply: 3 marks for a correct answer, -1 for an incorrect answer 0 if left blank

Last Week We had a look at the basic principles of HTML and designed our first simple webpage

So what did we do? 1. We created a HTML document We bundled some text up in tags.  The tags were organised into a hierarchy! 2. We saved it on our computer 3. We viewed it in a browser

So what did we do (continued)? The first tag in your HTML document is. This tag tells your browser that this is the start of an HTML document. The last tag in your document is. This tag tells your browser that this is the end of the HTML document.  Every HTML page we make will begin and end with these tags! The text between the tag and the tag is header information. Header information is not displayed in the browser window.

So what did we do (continued)? The text between the tags is the title of your document. The title is displayed in the tab of your browser The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font.

So what did we do (continued)? HTML mark-up is not programming!! HTML is about structuring text, hyperlinks, images and other forms of multimedia in a standard way that browsers can understand Think of it as a labelling system – the browser does the work

HTML Tags If we go back to our first example, what are the HTML elements?  The tags and their contents, e.g. This text is bold The HTML element starts with a opening tag: The content of the HTML element is: This text is bold The HTML element ends with an closing tag:  This is also an HTML element: This is my first homepage. This text isbold

Basic HTML Tags Headings are defined with the to tags ( defines the largest heading, defines the smallest heading) This is a heading HTML automatically adds an extra blank line before and after a heading.

Basic HTML Tags Paragraphs are defined with the tag.  This is a paragraph This is another paragraph HTML automatically adds an extra blank line before and after a paragraph.

Basic HTML Tags Line Breaks (the tag)  Used when you want to break a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it.  The tag is an empty tag. It has no end tag like, since a closing tag doesn't make any sense.  or

Basic HTML Tags Comments in HTML  The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

HTML Attributes We’ve looked at HTML elements, now we will look at Attributes that the HTML element tags can contain.  HTML tags can have attributes. Attributes provide additional information to an HTML element.  Attributes always come in name/value pairs like this: name="value“ And they are always specified in the start tag of a HTML element. E.g. Some red text

HTML Character Entities Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. Character Entities  have three parts: 1. an ampersand (&), 2. an entity name or a # and an entity number, and finally 3. a semicolon (;). For example, to display a less than (<) we would write <

HTML Character Entities The most common character entities are The most common of these is which we use to add a space into the text (browsers ignore a series entered with the spacebar). A complete list can be found at

Working with HTML Let’s open up our first web page - our HTML should look like this: Title of page This is my first homepage. This text is bold Let’s add in a heading Our Heading After we open our body tag

Working with HTML Our HTML will now be: Title of page Our Heading This is my first homepage. This text is bold Now save our page and re-open the file in the browser (or just hit refresh if you didn’t close the browser tab).

Working with HTML Now try adding the following attribute to the h1 tag: Title of page Our Heading This is my first homepage. This text is bold Save our page and hit refresh in the browser. Try changing “center” to “left” and “right”.

Working with HTML Have a look at what happens when we add this to the body tag: Title of page Our Heading This is my first homepage. This text is bold

Exercise Make a webpage called home.htm (this page will need the basic tags,, and ) Add a tag with the text home page Add a main heading on the page with the text Learning HTML Add a smaller heading on the page (under the main heading) with the text What is HTML? Align this smaller heading to the centre Create a new paragraph under this smaller heading and copy and paste in the following text (from HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-proprietary format based upon SGML, and can be created and processed by a wide range of tools, from simple plain text editors - you type it in from scratch - to sophisticated WYSIWYG authoring tools. In the code, before the paragraph you just added – add a comment saying This text is from

IS1811 Next week  Introduction to HTML layout Tables Lists Images

Want to read more? A reference for the tags commonly used in HTML 4.01  An easy to follow HTML tutorial (stop after the page for ‘line breaks’) 