Introduction to Web Development- Html Part Two

Web Development-Html Part Two

Welcome back! This is part two of my introduction to web development. Click here to view part one.

In part one I explained the basic structure of a website in html. I also explained that html uses tags to apply specific effects. These tags apply that effect to what is within the start and end tags.

  • You can view the html text coding of a website by right clicking and selecting view source on most browsers.

To review my example again a basic website code would look something like this:

<!doctype html>

<html>

<head><title>My Website’s Title</title> </head>

<body>

My simple website example would display this text on the page. The text within the title tags above would display on the browser tab.

</body>

</html>

Expanding on our simple website example

There are a few more tags that you must learn and use to further build upon your basic website. Remember the website will display what is within the <body> tags on the page.

Headings and Paragraph Tags

There is not much content on our example site yet but you could add in heading and paragraph tags to define the text further.

The paragraph tag is simply <p> and </p> and will automatically create a line break between paragraphs.

There are six heading start tags <h1> through <h6> and use closing or end tags</h1></h6> Heading text by default within the H1 tag will be the largest text, down to H6 smaller than the standard text.

Creating List in Html

Html can also be used to create list, both unordered and ordered. This is done using <ol> for ordered list and <ul> for unordered list. You must also use the <li> tag to define what items to list.

For example:

<ul>

Shopping list

<li> Chicken </li>

<li> White rice </li>

<li> Black beans </li>

</ul>

Would display like this:

Shopping list

  • Chicken
  • White rice
  • Black beans

Links and Images

Remember you can add links using <a href=”link url”> and images to website using <img src=”image url”> if you want to adjust the images height and width you can do that too. <img src=”image url” width=”100px” height =”100px”>

Advertisements

One thought on “Introduction to Web Development- Html Part Two

  1. Pingback: The Journey Begins – Evan's Way

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s