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:
<head><title>My Website’s Title</title> </head>
My simple website example would display this text on the page. The text within the title tags above would display on the browser tab.
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.
<li> Chicken </li>
<li> White rice </li>
<li> Black beans </li>
Would display like this:
- 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”>