cs543: web application programming lab 1: html tags & sw installation computer science...

17
CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

Upload: donald-spencer

Post on 18-Jan-2016

231 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

CS543: WEB APPLICATION PROGRAMMING

Lab 1: HTML tags & SW installationComputer

Science Department

Page 2: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

2

LAB INSTRUCTOR

Nourah AlSuqayh •Email: [email protected] •Office: 2.501.7 •Office Hours: Sun(9-12) Mon(10-11 & 1:30-2:30) Wed(8-9)

Page 3: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

3

What is HTML?

HTML: HTML is an acronym that stands for

HyperText Markup

Language.

It is the set of markup symbols or codes

placed in a file

intended for display on a Web browser page.

Page 4: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

4

Main HTML tags

an HTML document has an hierarchical structure<html> - is the root of the html document<head> - contains metadata about the document,action-scripting (see javascript), styles (see CSS) and general information referenced in the whole document<body> - contains the actual text of the docuan HTML document has an hierarchical structure

Page 5: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

5

HTML Elements

Page 6: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

6

HTML Color Names

Color Names Supported by All Browsers: 147 color names (or a hex values) are defined in theHTML and CSS color specification (17 standard colorsplus 130 more). The table below lists them all, alongwith their hexadecimal values. Tip: The 17 standard colors are: aqua, black, blue,fuchsia, gray, grey, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow.

Page 7: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

7

Creating an Ordered List

Page 8: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

8

Creating an Unordered List

Page 9: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

9

Working with Inline Elements

Page 10: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

10

REQUIRED SOFTWARE

Page 11: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

11

DOWNLOAD NOTEPAD ++

Go to: http://notepad-plus-plus.org/download/v6.1.8.html

Page 12: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

12

DOWNLOAD NOTEPAD ++

Click on Notepad++ Installer

Page 13: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

13

DOWNLOAD NOTEPAD ++

Save the setup file Click Run Button then click Next

Page 14: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

14

How to make HTML File Using Notepad++ ?

1- Open Notepad ++.

Start > All programs >Notepad ++>Notepad++.

OR > Notepad ++ shortcut.

2- Save the file

File >Save as Change the extension to html.

OR

Page 15: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

15

How to make HTML File Using Notepad++ ?

3- View the webpage.

Double click on the “Finle1” file

The webpage will display in the default web browser.

•OR Click Run >Launch in IE

Page 16: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

16

How to make HTML File Using Notepad++ ?

4- Edit the file

Click right on the file > Edit With Notepad++

Page 17: CS543: WEB APPLICATION PROGRAMMING Lab 1: HTML tags & SW installation Computer Science Department

17

Example