Getting Started with HTML Please use speaker notes for additional information!

Slides:



Advertisements
Similar presentations
Internet Basics & Way Beyond!
Advertisements

HTML popo.
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.
HTML popo.
Teppo Räisänen LIIKE/OAMK 2010
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.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
HTML Programming last updated 9/12/05 at 1:30pm HyperText Markup Language Reference: – HTML BasicsHTML Basics An HTML program is a set of paired tags that.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Using color and fonts in HTML and XHTML Please use speaker notes for additional information!
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
Computer Sciences Department
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
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.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
CS105 Introduction to Computer Concepts HTML
Creating Web Pages with Links, Images, and Formatted Text.
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.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
HTML (HyperText Markup Language)
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Understanding HTML Code
 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.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
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.
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
Getting Started with HTML Please use speaker notes for additional information!
Just Enough HTML How to Create Basic HTML Documents.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
HTML: Hyptertext Markup Language Doman’s Sections.
College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008.
1 Lect 4 HTML-Intro. 2 HTML & Web Pages A Web page is a text document that contains additional formatting information in the HyperText Markup Language.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
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.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.
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.
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
Basic Web Publishing M. Scott Gartner 7/15/98.
HTML.
HTML Basics.
What is HTML? Acronym for: HyperText Markup Language
Marking Up with XHTML Tags describe how a web page should look
Elements of HTML Web Design – Sec 3-2
Elements of HTML Web Design – Sec 3-2
CSCI-235 Micro-Computers in Science
Elements of HTML Web Design – Sec 3-2
COMPUTING FUNDAMENTALS
Working with HTML These are the examples you need to go over. Click on the name like HTML5intro.html and it will bring up the page. If you right click.
Computers and Scientific Thinking David Reed, Creighton University
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Html.
Introduction to HTML.
Marking Up with XHTML Tags describe how a web page should look
Basic HTML.
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Presentation transcript:

Getting Started with HTML Please use speaker notes for additional information!

<!--This is a comment tag. I will use this to explain the structure of the code. HTML tags are embedded in the text of the document/web page that you create. The angle brackets < and > surround the markup instructions and make the instruction detectable to the browser when it is showing your page. You start with the word HTML enclosed in. Note the ending comment tag --> <!-- The code can be broken down into two sections: the HEAD and the BODY. Note that the beginning HEAD tag is simply enclosed in angle brackets while the closing head tag uses the angle brackets and a slash: </. For now, the only thing we will put in the HEAD is the TITLE. Note the use of the starting and ending TITLE tags. You will see that most tags use both the start and the end. We will deal with exceptions as the arise. The title will appear in the top left corner of the screen when the browser is displaying the web page --> Getting started with HTML <!-- We are now in the BODY portion of the HTML where most of the code is written. Note at the end of the code, I close the BODY and finaly close the HTML. --> This web page will be used to explain the concepts of HTML. To see the comments look at the with comments version of the page. Notice that I am writing headers - H1, H2, H3 etc. through H6 Note the characteristics of these headers. Each starts on a separate line. And there is a blank line between them.

Now I am going to write some regular text. Note that I am writing enough text so that it will wrap around onto a second line. In HTML, when the text wraps to the next line is determined by the browser settings. When I write the code, I press enter when I want to move to another line to write my code. This has no impact on what you see on the screen. To see the code as I wrote it, look under View/Page Source in Netscape or View/Source in Explorer. Note that even if I leave multiple spaces when I am entering the code, HTML will only show one space. Now I am done with this text and so I will use the BR tag to indicate a break. When I start writing again it will be on a different line. I moved to a new line when I was writing this code, but I did not have to. The BR can be embedded as I write the code. BR is an example of a tag that does not have a corresponding closing tag. I can also use paragraph tags to start a new paragraph. Paragraph tags have a closing tag, but they are not always used - note it is a good idea to use them because of future versions of web code. This is another paragraph. Note that the paragraph tag leaves a blank line above the paragraph. This did not happen with the BR tag. However I could have used two BR tags to skip a line.

Making the page more interesting This header is aligned to the center This code is aligned to the right. Now I am going to make a list of the commands we have looked at: HEAD and TITLE BODY with the BGCOLOR and TEXT attributes Headers BR and P ALIGN attribute used with a header (note can also be used with a paragraph) Unordered lists (ordered lists will be covered below) with line items in the list First Second Third Next I am going to make a nested list (a list within a list). First list (note this is in the outer list) An item within the first list Another item within the first list On the next line I will close the items within the first list and return to the outer list Second list (note this is back to the outer list) Notice that on the line above, I closed the outer list. Be sure to look at the source code to see how this was done.

Making the page more interesting <!-- These are the color codes for Silver and for Magenta. You can do a search on the web to come up with a variety of color codes. Here are a few: Gray is , Blue is 0000FF, Cyan is 00FFFF, Lime is 00FF00, Yellow is FFFF00, Red is FF0000, Black is the , Navy is , Teal is , Green is or another Green is 00FF00, Olive is , Maroon is , Purple is Many of the common colors can be expressed in words. --> This header is aligned to the center <!--The align attribute can be set to center, right or left. The default attribute is left.--> This code is aligned to the right. Now I am going to make a list of the commands we have looked at: HEAD and TITLE BODY with the BGCOLOR and TEXT attributes Headers BR and P ALIGN attribute used with a header (note can also be used with a paragraph) Unordered lists (ordered lists will be covered below) with line items in the list First Second Third Next I am going to make a nested list (a list within a list). First list (note this is in the outer list) An item within the first list Another item within the first list On the next line I will close the items within the first list and return to the outer Second list (note this is back to the outer list) Notice that on the line above, I closed the outer list. Be sure to look at the source code to see how this was done.

Making the page more interesting This header is aligned to the center This code is aligned to the right. Now I am going to make a list of the commands we have looked at: HEAD and TITLE BODY with the BGCOLOR and TEXT attributes Headers BR and P ALIGN attribute used with a header (note can also be used with a paragraph) Unordered lists (ordered lists will be covered below) with line items in the list Here I am giving colors for the background and the text. Note that these colors are within the BODY tag. You code. We will look at other ways to do alignment, but here I am using align= inside the header tag. UL stands for unordered list which means bullets are used. Note that the list items also have a closed list item. This is not required under existing standards but will be strongly encouraged under the new standards.

First Second Third Next I am going to make a nested list (a list within a list). First list (note this is in the outer list) An item within the first list Another item within the first list On the next line I will close the items within the first list and return to the outer list Second list (note this is back to the outer list) Notice that on the line above, I closed the outer list. Be sure to look at the source code to see how this was done. OL means ordered list which means the list is numbered 1, 2, 3 instead of using bullets. I have show the outer list in blue and the inner (embedded) list in red for clarity.

Images, Linking and Tables Testing Images, Linking and Tables This is in red and the font size is set to 6. The rest of this is the default text and size since I closed the FONT tag. <!--To put an image on a page, you should use.gif or.jpg (.jpeg) because these are supported by all browsers. The image should be in the same directory as the page or a path to the image has to be provided.--> You can have text beside the image and as you will see the text aligns with the bottom of the image. You can change this using alignment. Notice that I have written enough text here to get wrap (at least on my screen). <!-- Here I am using DIV for division to set the alignment to the center. Until I close the DIV, everything will be aligned in the center. Notice I am also establishing a different height and width for the image. --> Top left Top right Bottom left Bottom right <!--The code above establishes a table. Note that I have a border on the table with a width of 2. If I eliminated border, the table would not have the cell structure. TR sets up a row and TD sets up an element in that row. Note that each needs to be opened and closed. You must also be very sure to close the table when you are done or problems will develop. Note that I had not closed the until after the table so the table is also aligned to the center. -->

Now I am going to establish a link to the other example pages that I did. This links to the first page we looked at. This links to the second page we looked at. <!--The A HREF is the code to establish a link. The page that I want to link to follows the HREF (hypertext reference). Note that this page needs to be in the same directory. If it is in a different directory, I need a path. After writing the words that will appear as the code to click on to link to the page, I close the A (anchor). In the code below I am linking to a page on the web using the entire address, so I am giving the entire path in the hypertext reference.--> This links to the first page using the entire path

Images, Linking and Tables Testing Images, Linking and Tables This is in red and the font size is set to 6. The rest of this is the default text and size since I closed the FONT tag. <!--To put an image on a page, you should use.gif or.jpg (.jpeg) because these are supported by all browsers. The image should be in the same directory as the page or a path to the image has to be provided.--> You can have text beside the image and as you will see the text aligns with the bottom of the image. You can change this using alignment. Notice that I have written enough text here to get wrap (at least on my screen).

<!-- Here I am using DIV for division to set the alignment to the center. Until I close the DIV, everything will be aligned in the center. Notice I am also establishing a different height and width for the image. -->

Top left Top right Bottom left Bottom right <!--The code above establishes a table. Note that I have a border on the table with a width of 2. If I eliminated border, the table would not have the cell structure. TR sets up a row and TD sets up an element in that row. Note that each needs to be opened and closed. You must also be very sure to close the table when you are done or problems will develop. Note that I had not closed the until after the table so the table is also aligned to the center. --> I am now setting up a table - this table has two rows and two columns. The border of 2 specifies the size of the border around the table. Row one has two cells - each is shown with TD. The first cell says top left and the second cell says top right. Row two also has two cells - each is shown with TD. The first cell says bottom left and the second cell says bottom right.

Now I am going to establish a link to the other example pages that I did. This links to the first page we looked at. This links to the second page we looked at. <!--The A HREF is the code to establish a link. The page that I want to link to follows the HREF (hypertext reference). Note that this page needs to be in the same directory. If it is in a different directory, I need a path. After writing the words that will appear as the code to click on to link to the page, I close the A (anchor). In the code below I am linking to a page on the web using the entire address, so I am giving the entire path in the hypertext reference.--> This links to the first page using the entire path

Menu FLUENCY MENU FIRST PAGE FIRST PAGE with comments SECOND PAGE SECOND PAGE with comments THIRD PAGE means to leave this cell empty. I need to account for the cell and I need to tell what should be in in. puts a space in the cell.