Lecture 2 Building Web Pages 1 Lecture 2  Building Web pages  Languages and programs  HTML - Hyper Text Markup Language  Netscape’s Composer  MicroSoft.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Chapter 8 HTML Editors Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors No single method Notepad Textpad, Notetab, and.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
WeB application development
Information Technology in Travel, Hospitality and Tourism
Basic Web Publishing BA209 Arturo Perez-Reyes. Web is a communication protocol The Internet is A net of nets That use the TCP/IP protocol To publish on.
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thu 14:00 – 16:50) TA: Jackie Lo.
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
ETT 429 Spring 2007 Web Design I.
Creating and Publishing Your own website
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.
How can basic HTML sites be improved?. The Difference Between Hyper Text Markup Language Is a markup language for describing web pages Is used to create.
Introduction to HTML. What is a Web site? A collection of "pages" or files linked together and available on the World Wide Web What do you need to create.
Creating a Web Page HTML, FrontPage, Word, Composer.
Designing a Classroom Web Site Using NVU Beginning Level.
Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
CPSC 203 Introduction to Computers Lab 39, 40 By Jie (Jeff) Gao.
Create a Website Session I Key Components Hands-on HTML.
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.
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.
Create Your Own Webpage. Fun with images Today we’ll cover –Working with images Including an image on your page Making the image a link Editing images.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Understanding HTML Code
Website Development with Dreamweaver
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
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.
OBJECTIVES  What is HTML  What tools are needed  Creating a Web drive on campus (done only once)  HTML file layout  Some HTML tags  Creating and.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Websites 101 Technology Committee UPSOM. Web Class – Goals  Make a simple web page (or series of pages)  Upload that page to the internet  Feel comfortable.
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.
Copyright 2006 South-Western/Thomson Learning Chapter 17 Creating and Linking Web Pages.
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.
CPSC 203 Introduction to Computers Lab 23 By Jie Gao.
HTML Hyper Text Markup Language A simple introduction.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating 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.
HTML I An Introduction to the Language of the Web Terry Bake
Creating and Publishing Your own web site PC Version SEAS 001 Professor Ahmadi.
HTML BASICS Web Design I. Web Design  WWW created in the late 1980’s  Used in academics for the next 5 years  Mosaic (1994) allowed both pictures &
Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.
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.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
Web Page Fundamentals HTML: The Language of the Web.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
Using FrontPage FrontPage is a great Web editing tool for people with limited knowledge and time for HTML coding. It’s similar to using Microsoft Word.
1 Double Click to Edit. Installing Evernote 22 First, download the installation software. Open your favorite web browser and visit the Evernote Web site.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
HTML Assoc. Prof. Rozinah Jamaludin 28 January 2010.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.
This shows CIS17 and the first day introduction..
HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,
HTML Hyper Text Markup Language. The Basics u HTML documents contain “tags” which instruct the Browser software on how to present the information within.
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.
Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
HTML Hyper Text Markup Language. Agenda Basics Tools Important tags Tables & databases Forms Publishing at Stern.
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Introduction to HTML.
XHTML/CSS Week 1.
Computers and Information Systems
HTML HYPERTEXT MARKUP LANGUAGE.
Computers and Information Systems
Computers and Information Systems
Presentation transcript:

Lecture 2 Building Web Pages 1 Lecture 2  Building Web pages  Languages and programs  HTML - Hyper Text Markup Language  Netscape’s Composer  MicroSoft Front Page  Dreamweaver  Word

Lecture 2 Building Web Pages 2 Keep it simple  Word can save a file as a web page file (html)  Word is familiar to you, but it creates complex and nonstandard html code  Netscape’s Composer  Easy to learn and very simple html code, but not very powerful  Straight HTML  Lots of syntax to learn but the best way understand what is happening  Front Page  Easy to use  Available on LAN and part of MS package  More sophisticated than Composer  Recommended for you after you use HTML  Dreamweaver  Excellent when working with a large site.  Similar to FrontPage, but more complicated and more powerful

Lecture 2 Building Web Pages 3 Use word to create a file and save it as a ‘web page’ File --- Save as Use Word to make a web page

Lecture 2 Building Web Pages 4 Word’s html code From Wordpad (or Notepad) open the word htm file called wordhtmltest.htm Pretty messy looking html.

Lecture 2 Building Web Pages 5 Use Wordpad (or Notepad) to create an htm file: Start – Programs – Accessories - Wordpad If you are using Wordpad, you must save the file as a text document, making sure you explicitly type the name and the extension in the filename line. Wordpad has more saving options than Notepad, so be careful to save the file correctly.

Lecture 2 Building Web Pages 6 htmltest.htm in Browsers Netscape 4.7 Netscape 7.0 Internet Explorer 5.5/6.2 Mozilla 1.0

Lecture 2 Building Web Pages 7 Conclusions?  Keep it simple.  A little html knowledge goes a long way.

Lecture 2 Building Web Pages 8 How to open your www account go to: enter username and password click here: W3Setup

Lecture 2 Building Web Pages 9 Entering your password is all you need to do.

Lecture 2 Building Web Pages 10 What we want for pa1:

Lecture 2 Building Web Pages 11 Using Wordpad to create a file called index.html and save it to your desktop folder. Enter the text shown here. A great place to learn more about what tags are is: Remember: If you are using Wordpad, you must save the file as a text document, making sure you explicitly type the name and the extension in the filename line.

Lecture 2 Building Web Pages 12 In the body tag area, we will create a table of one column and width of 100% of the browser window. means new row and means next table cell means center and means line break. table tag must be closed Text entry

Lecture 2 Building Web Pages 13 Save your file and take a look at it (open it) in a browser. So far so good!

Lecture 2 Building Web Pages 14 In the body tag area, add another row to the table and insert an image. An image needs a source SRC=“yourpicture.jpg”, and dimensions of height and width (in pixels). You have to have an image in the same folder as your index.html file! Go get one if you don’t have one. An Image

Lecture 2 Building Web Pages 15 Resume Link Insert a link to a Word file that is called resume.doc. <a href is an anchor tag to a hypertext link. The words My Resume will be seen on the page. Make sure you have a document named resume.doc in your local folder.

Lecture 2 Building Web Pages 16 Save your file and take a look at it (open it) in a browser. So far so good!

Lecture 2 Building Web Pages 17 Favorite Link Insert a link to a external www location. This is identical to the document link, but we now enter a location on the web, rather than a file name.

Lecture 2 Building Web Pages 18 Insert a link with the action word: where xxxx is your four digit id. Link

Lecture 2 Building Web Pages 19 Looking Good!

Lecture 2 Building Web Pages 20 Upload files

Lecture 2 Building Web Pages 21 To Edit your page  Download the index.html file from ws2 using SSH  Make changes in Notepad, or FrontPage, or Dreamweaver  Upload the page back to ws2 using SSH

Lecture 2 Building Web Pages 22 pa1 requirements – 20 points  The page must appear when entering  Name and address  A picture  Your resume link  Your favorite link  Your button