Download presentation
Presentation is loading. Please wait.
1
Lecture 7 Introduction to Web Programming
2
What we have learnt so far…
Developing a basic web page Lecture 7
3
HTML Documents creation (step by step)
Step 1: open “Notepad” in your computer Start -> All Programs -> Accessories -> Notepad Step 2: write your html code in the notepad (copy-paste from next slide) Lecture 7
4
Sample HTML code <html> <head>
<TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> We will have a close look at the code later! Lecture 7
5
HTML Documents creation (step by step)
Step 3: save the file in your computer… File -> Save As… Lecture 7
6
HTML Documents creation (step by step)
Step 3 contd.: save the file as .html or .htm file Choose “All Files” in the field “save as type:” Type “sample.htm” in the field “File name:” You may replace sample with any other name you want Click on “Save” button Now, double-click on the saved file to open it up as a web browsing page Lecture 7
7
Editing a saved HTML Document (step by step)
Right click on the “sample.htm” file and open with Notepad Edit/Modify… Click on “File -> Save” button Now, double-click on the saved file to open it up as a web browsing page Lecture 7
8
“Welcome to <first name> <last name>’s webpage!”
In-class fun! Create an html document with title: “Welcome to <first name> <last name>’s webpage!” and execute the html file using your web browser! Remember to always backup the in-class files in your usb drive or before logging off from the class. After logging off, all the files stored in the computer Temp folder will be erased. Lecture 7
9
How to view your HTML files over the Internet
HTML files need to be uploaded to a web server to view them over the Internet E.g., JJ web server There are many free web servers and many more… For this class, you may create an account with any such web servers for the practice purpose Let’s take an example: Lecture 7
10
How to upload files… Sign in using your username and password
You will be taken to the control panel Click on the “File Manager” Tab Here you can upload your files to the web server One at a time Eight at a time Or zip the entire folder After successful uploading, you can view your webpage/website over the Internet Example: Lecture 7
11
One particular thing to remember!
Starting page! Web servers by default take one particular file as the homepage of your website index.htm or index.html Try to be uniform with your naming convention throughout this class The html page that you want to load as the homepage of you website Name it as index.htm Lecture 7
12
First HTML code <html> <head>
<TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> We will start with this simple code. Lecture 7
13
First HTML code Title of the html document Body of the html document
Complete html document Lecture 7
14
Tags HTML document Tags - core building block of HTML
<head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> Tags HTML document Consists of tags Tags - core building block of HTML marks the presence of an element marks the “start” and “end” of an element Two-sided tags vs. single-sided tags General syntax for two-sided tags <tag> content </tag> Opening tag Closing tag Lecture 7
15
More about tags special terms surrounded by angle brackets
can be upper, lower or mixed case <TITLE> Math 279 </TITLE> <title> Math 279 </title> <TitLe> Math 279 </tiTlE> are all ok most tags come in pairs, some don’t Lecture 7
16
HTML tags <HTML> … </HTML>
tells browser that file contains HTML-coded information Anything between these two tags makes up the document content, including all other elements, text, and comments Lecture 7
17
The Structure of an HTML File
An HTML document is divided into two main elements: the head and the body head element contains info about the document, for example, the document title or the keywords <HEAD> … </HEAD> represents the head tags The content of the head element is not displayed within the Web page Lecture 7
18
Title tags <TITLE> … </TITLE>
used inside <HEAD> … </HEAD> identify document title displayed in the title bar at top of browser window identifies your page for search engines Lecture 7
19
Body tags <BODY> … </BODY>
start and end the actual contents (body) The body element contains all of the content to appear on the Web page HTML, HEAD, TITLE and BODY are four most basic tags in any html document Lecture 7
20
Block-Level Elements Block-level elements - distinct blocks within the body Enhance Readability Presentation of the web page Similar to a technical document Document title, section title, section text, paragraphs etc. Most generic and popular Paragraphs Headings
21
Paragraphs and Headings
<P>…</P> Headings <H1>…</H1>, <H2>…</H2>, …, <H6>…</H6> six levels of headings H1 is largest H6 the smallest size
22
Recap the First HTML code
<head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html>
23
and execute the html file using your web browser!
Do it yourself! add another level of heading: <h2>…</h2> to the existing page add two paragraphs and execute the html file using your web browser! Lecture 7
24
One sided tag (empty elements)
An empty element contains no content Empty elements appear in code as one-sided tags General syntax <element> or <element /> line break <br> or <br /> horizontal line <hr> or <hr />
25
Recap… <html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> <br> <h2>First section </h2><br> <hr> <h2>Second section </h2><br> <hr> <h2>Third section </h2><br> <hr> </body> </html> Lecture 7
26
In-class practice #1 Lecture 7
Learning about headings, para and horizontal line. Lecture 7 Lecture 7
27
Using Block Quote – rendering web page better for readability
Lecture 7
28
Using Block Quote <blockquote> <p>Basic web development is about creating web page, editing web page, modifying web page. Here we learn about the four most basic component of html tags. </p> </blockquote> Lecture 7
29
Marking a List Lecture 7
30
<ol> … </ol>
List tags ordered list Also known as numerical list <ol> … </ol> Lecture 7
31
Adding a List HTML supports three kinds of lists:
ordered unordered, and Definition Ordered list for items that must appear in a numerical order Unordered list for items that do not need to occur in any special order (bullet list) Definition list for definition items Try inserting an ordered list in your html code! Lecture 7
32
Adding lists ordered list (enumerated list):
<ol> … </ol>: <li>…</li>: specify each list item for both unordered and ordered lists unordered list (bulleted list): <ul> … </ul> <li>…</li>: specify each list item definition list: <dl>…</dl> a list of definitions <dt>…</dt>: definition term <dd>…</dd>: definition description Lecture 7
33
Example for list tags Creates bulleted list Creates numbered list
<html> <head> <TITLE>Example for list tags</TITLE> </head> <body> Three kinds of lists are <ul> <li>unordered list</li> <li>ordered list </li> <li>definition list </li> </ul> <ol> </ol> <dl> <dt>unordered list:</dt> <dd>shows bullets</dd> <dt>ordered list:</dt> <dd>shows number</dd> <dt>definition list:</dt> <dd>lists definitions</dd> </dl> </body> </html> Creates bulleted list Creates numbered list Creates definition list Lecture 7
34
Nesting Lists Lecture 7
35
Nesting Lists <ul> <li>double sided tags</li> <ol> <li>html tags</li> <li>head tags</li> <li>title tags</li> <li>body tags</li> </ol> <li>single sided tags</li> <li>line break tag</li> <li>horizontal line tag</li> </ul> Lecture 7
36
Nesting lists with other tags
Lecture 7
37
inline elements Inline element: marks a section of text within a block-level element Often used to format characters and words Also referred to as character formatting elements <b></b>: boldface any text inside <i></i>: italicizes any text inside Lecture 7
38
Format the text as below
Lecture 7
39
More HTML text formatting tags…
Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <u> Defines underlined text <ins> Defines inserted text <del> Defines deleted text Lecture 7
40
Other block-level element - address
HTML supports the address element to indicate contact info. <address> … </address> Most browsers display an address element in an italicized font e.g. <address> John Jay College of Criminal Justice, New York, NY 10019 </address> Lecture 7
41
In-class Practice #2 Lecture 7
42
In-class Practice #3 Lecture 7
Similar presentations
