Let’s build a website

It tells your browser like Internet Explorer or Firefox what to display on a web page.. HTML stands for HyperText Markup Language.. For HTML, these instructions are called tags.HTML =

Trang 1

Let’s Build a Website

by Sybil Prince Nelson

Trang 2

What is HTML?

HTML is the language used to create web pages It tells your browser (like Internet

Explorer or Firefox) what to display on a web page.

What does HTML stand for?

HTML stands for HyperText Markup Language.

HypertextText with links to other pages Can contain images and other things

Basically, a web page.Markup LanguageThe set of instructions that describe how

text should be displayed For HTML, these instructions are called tags.HTML =

HyperText Markup Language = The tags that tell your browser what to display

on a web page.

How Does HTML Work?

In an HTML tutorial for beginners it's all about the tags Browsers, like Internet

Explorer or Firefox, are used to display web pages Tags tell your browser what

to display on a web page This is the HTML tag:

<html>

It's the main tag It says, "Everthing after this is a web page." There are beginning

and ending tags They come in pairs:

<html> </html>

Your browser understands this Your browser doesn't display tags It displays only

what is between the tags.

Trang 3

A Basic Webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml1

1.dtd">

<html>

<body>

<h1>This is a heading</h1>

<p>This is the paragraph text This is more

paragraph text This is more paragraph text

</p>

</body>

</html>

Trang 4

Let’s get a little fancier

HTML Elements

Most HTML elements have these four parts:

A starting tag Example: <p>

An ending tag Example: </p>

The content between the starting and ending tags

Example: "Once upon a time a girl with… etc."

Attributes (more about attributes in the next section)

Example: style="background-color:yellow"

Here's an example of an HTML element:

<p style="background-color:yellow">Once upon a time a girl

with beautiful long golden hair… etc.</p>

By the way… there are a few elements that only have one

tag For example:

The <br /> element causes the browser to skip to the next

line It's the "line break" tag There are no contents or ending

tag for these types of elements

Trang 5

Still getting fancy

HTML Attributes

A HTML element can have attributes An attribute gives

more information about the contents of an element to the

browser Think of an attribute as quality or characteristic

of the element The attribute of an element is located in

the starting tag

This particular style attribute tells the browser to make the

background color of that paragraph yellow

If you know your HTML basics it will be much easier for

you to learn what you need to know in order to build your

website If you are going to be creating websites for a

while (there's a good chance you will be) tags, elements

and attributes are things you want to be clear on

Trang 6

Let’s try it

A friendly tool.

Trang 7

Ways to Build a Website

There are several ways to build a

website:

•Point and click software (fast, not

flexible).

•Manually writing the HTML (important

to learn, requires time) – notepad, word,

powerpoint

•Using an HTML Editor (efficient once

learned, HTML knowledge helps).

•Using a template (easy, efficient, must

use HTML)

Trang 8

Some helpful html language

Email:

HTML Code: <a href= "mailto:abc@mail.com" >Email Example</a>

Images:

HTML Code: <img src=“picturename.gif" />

Important: Where is this picture?

Src stands for source There are two ways to define the

source of an image First you may use a standard URL

(src=http://www.Tizag.com/pics/htmlT/pitcurename.gif) As

your second choice, you may copy or upload the file onto your

web server and access it locally using standard directory tree

methods (src=" /picturename.gif") The location of this picture

file is in relation to your location of your html file

For more info on images:

http://www.tizag.com/htmlT/images.php

Trang 9

Your MUSC space

• Step 1

My computer < Map Network Drive

• Step 2

Enter \\homeroom.musc.edu\netID

• Step 3

For user name enter clinlan\netID

Trang 10

Let’s Try it!

Trang 11

How to design your site

• Think about the function of your

site

• Go for simplicity as opposed to

clutter

• Avoid text fonts smaller than 11px

• Keep a consistent layout

• Every few edits, check your

progress

Trang 12

Assignment Create a website that includes the

following:

• Name

• Picture

• A short bio

• Personal/contact info

• Current classes

• Research interests

• CV

Email me a link to your website

Định dạng
Số trang	12
Dung lượng	228,5 KB