Scribd
Upload
63 views

HTML and Css

This document provides an overview of HTML (Hypertext Markup Language) and how to code basic HTML pages. It discusses HTML tags and elements, different types of headings, paragraphs, lists, links, images and tables. It also covers HTML page structure with <html>, <head> and <body> tags, and using <!DOCTYPE> to identify the HTML version. The document provides examples of how to add colors, insert horizontal rules and comments. Finally, it discusses using text editors like Notepad to write HTML and view pages in a browser.

Uploaded by

Ahmet Can Akgül
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
63 views

HTML and Css

This document provides an overview of HTML (Hypertext Markup Language) and how to code basic HTML pages. It discusses HTML tags and elements, different types of headings, paragraphs, lists, links, images and tables. It also covers HTML page structure with <html>, <head> and <body> tags, and using <!DOCTYPE> to identify the HTML version. The document provides examples of how to add colors, insert horizontal rules and comments. Finally, it discusses using text editors like Notepad to write HTML and view pages in a browser.

Uploaded by

Ahmet Can Akgül
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Programming Applications

Spring 2015-2016
Ass. Prof. Dr. Pelin GRGEL
([email protected])
17.02.2016

19:37

Grading

Midterm Exam : %25


Project : %25
Final Exam : %50

Project product should be a software


developed with HTML, JSF and a relevant
database.

19:37

Course Resources
Textbook: How to Program JAVA
Deitel & Deitel
Lecture Slides
Attendance
Attendance at the lectures will not be
taken.

19:37

Outline

HTML
Java Server Faces (JSF)
Java Managed Beans
Database Connection in JSF
SQL Commands
Multithreading in Java
Project Control and Grading

19:37

What is HTML?

HTML is a language for describing web pages.


HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain
text
HTML documents are also called web pages
A "markup language" is a computer language
that describes how a page should be formatted.
If you want to change fonts, add colors, create
headlines and embed graphics in your page,
HTML is the language you use to do it.

19:37

19:37

An HTML Code Example


<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
19:37

HTML Tags

HTML markup tags are usually called


HTML tags
Start and end tags are also called
opening tags and closing tags
HTML tags are keywords (tag names)
surrounded by angle brackets like
<html>
The first tag in a pair is the start tag, the
second tag is the end tag
The end tag is written like the start tag,
with a forward slash before the tag
name
HTML tags normally come in pairs like
<b> and </b> <tagname>content</tagname>

19:37

HTML Elements

"HTML tags" and "HTML elements" are


often used to describe the same thing.
The tags are simple instructions that tell
the Web browser how the page should
look when it is displayed.
But strictly speaking, an HTML element is
everything between the start tag and the
end tag.
<html> The whole content comes here
</html>

19:37

HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
19:37

10

A Web Page

19:37

11

HTML Versions

19:37

12

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps


the browser to display a web page
correctly.
There are many different documents
on the web, and a browser can only
display an HTML page 100%
correctly if it knows the HTML type
and version used.

19:37

13

Common <!DOCTYPE>
Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
19:37

14

HTML Headings
HTML headings are defined with the
<h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Note:Use HTML headings for headings only. Don't

use headings to make text BIG or bold.


Search engines use your headings to index the
19:37structure and content of your web pages.

15

HTML Paragraphs

HTML paragraphs are defined with


the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

19:37

16

Adding Background Color


Change the background color of your
page by adding bgcolor="color"
within the tag.
Example:
<body bgcolor="yellow">
Again, as was described in the
section on changing font color, you
can use most standard colors, or use
a Hexadecimal Color Code.

19:37

17

HTML Unordered Lists


An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items are marked with bullets
(typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a
browser:
Milk
Coffee

19:37

18

HTML Ordered Lists

1.
2.

An ordered list starts with the <ol> tag.


Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a
browser:
Coffee
Milk

19:37

19

HTML Ordered Lists

<ol type="A"> orders the list by capital


letters: (A, B, C...)
<ol type="a"> orders the list by small
letters: (a, b, c...)
<ol type="I"> orders the list by Roman
numerals: (I, II, III...)
<ol type="i"> orders the list by small
Roman numerals: (i, ii, iii...)
If you would like to start your ordered list
with a specified value, such as "6," use
the following "start" and "value" tags:
<ol start=5> <li value=6>

19:37

20

Some Additional HTML


Elements
HTML elements with no content are
called empty elements.
<br> is used to position at the
beginning of the next line.
The <hr>tag creates a horizontal line
in an HTML page.
<!-- This is a comment-->
<sub> <sup> <i> <strong>
<b>

19:37

21

HTML Layouts

Web page layout is very important to make your


website look good.
Most websites have put their content in multiple
columns (formatted like a magazine or
newspaper).
Multiple columns are created by using <div> or
<table> elements. CSS are used to position
elements, or to create backgrounds or colorful
look for the pages.
Even though it is possible to create nice layouts
with HTML tables, tables were designed for
presenting tabular data - NOT as a layout tool!

19:37

22

HTML Links and HTML Images

HTML links are defined with the <a>


tag.

<a href="http://www.istanbul.edu.tr">This is a link


</a>

HTML images are defined with the


<img> tag.
<img src=istanbul.jpg" width="104"
height="142">

19:37

23

HTML Tables

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

19:37

24

Table Size

The width and height of rows and columns in a table will


expand automatically to fit the length of data and/or the
space of the browser window. To specify a width and
height, include either pixels or percentage values within the
starting "table" tag:
Example: <table width=300 height=400>
Width and height can also be specified for an individual
data cell, as opposed to the table as a whole. To do this,
add width="value" to the <tr> or <td> tag in question.
Again, it's a good idea to simply experiment with pixel and
percentage values to find out what they look like in a
browser.

19:37

25

Table Size

Cellpadding
The "cellpadding" tag specifies (in pixels) the
amount of space between the edges of each cell
and the data inside each cell. Use it within the
starting "table" tag:
Example 1: <table border=1 cellpadding=5>
Example 2: <table border=1 cellpadding=15>
Cellspacing
The "cellspacing" tag specifies (in pixels) the
amount of space between each cell. Use it within
the "table" tag:
Example 1: <table border=1 cellspacing=5>
Example 2: <table border=1 cellspacing=15>

19:37

26

HTML Table Headers


<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
19:37
</table>

27

HTML Editors

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
MS FrontPage

19:37

28

Writing HTML Using Notepad or


Text Editors

Step 1: Start Notepad


To start Notepad go to:
Start
All Programs
Accessories
Notepad
Step 2: Edit Your HTML with Notepad
Type your HTML code into your Notepad:

19:37

29

Writing HTML Using Notepad or


Text Editors

Step 3: Save Your HTML


Step 4: Run the HTML in Your
Browser

19:37

30

You might also like