HTML is not dead

Posted: January 1, 2017 in Tutorials
Tags: , ,

example_web_designGood web design does not have to be hard or complicated, even though most web designers are moving away from HTML I find that this web building is still a good way to go, simple is always better and good navigation on a web site is most important. Left Colum navigation menu is easiest and best however Left or right or a combination of either along with horizontal at the top menu are fine as well, stay away from using pictures as navigation menu because the viewer may miss the link thinking it’s just an image, not all visitors know to mouse over things while browsing your site. Click the picture to view full size then click back to return

HTML Basics

HTML is a markup language that is the basic building blocks of websites. It is written in the form of HTML elements which consist of tags, like <html>.

If you’re planning on building your own website from scratch, or another type of website building tool, a basic knowledge of HTML will help you create the website you want.

Setting up a blank HTML document

If you are starting with a blank html file, at the top of your document, type:

<!DOCTYPE HTML> (Declares the file as a standard HTML5 document)
<html>
< body>

your content goes here
</body>
< /html>
at the bottom of the document.
You’ll be placing all your text and other HTML tags between these opening and closing tags.

Basic Font Styling

Bold Text:
Your Text here = <strong> Your Text here </strong>

Italic Text:
Your Text here = <em> Your Text here </em>

Bold & Italic Text:
Your Text here = <strong><em> Your Text here </em></strong>

Changing Font Size:
Your Text here = <p style="font-size:18px"> Your Text here </p>

Changing Font Color:
Your Text here = <p style="color:#f00"> Your Text here </p>

Changing Fonts:
Verdana = <p style="font-family:Verdana, Geneva, sans-serif"> Verdana </p>
Georgia = <p style="font-family:Georgia, ‘Times New Roman’, Times, serif"> Verdana </p>
Courier = <p style="font-family:’Courier New’, Courier, monospace"> Verdana </p>
Arial / Helvetica = <p style="font-family:Arial, Helvetica, sans-serif"> Arial/Helvetica </p>
Lucida = <p style="font-family:’Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif"> Lucida </p>

 

Images

Adding an image to your site

<img src="path_to_your_images/exampleImage.jpg" alt="alternative text – this is an image" />

Images can be floated to the left or right within a layout or block of text by using floats.

<img src="path_to_your_images/exampleImage.jpg" alt="this is an image" style="float:left" />

<img src="path_to_your_images/exampleImage.jpg" alt="this is an image" style="float:right" />

Heading Tags

Here is the code to add different Heading styles to your page:
< h1>Heading 1</h1>
< h2>Heading 2</h1>
< h3>Heading 3</h1>

Heading 1

Heading 2

Heading 3

Note: Due to differences in styling from website to website, your Heading tags may look differently

Paragraphs & Lists

Code to make a new paragraph:
< p> Your text goes here </p>

Code to make an unordered list:
< ul>
<li>Your text goes here, inside a list item tag. </li>
</ul>

  • This text is inside of a <li> tag, inside of a <ul> tag.
  • Here is a second <li> tag, inside of the same <ul> tag.

Code to make an ordered list:
< ol>
<li>Your text goes here, inside a list item tag. </li>
</ol>

  1. This text is inside of a <li> tag, inside of a <ol> tag.
  2. Here is a second <li> tag, inside of the same <ol> tag.
Divs & other layout tags

Here are examples of HTML tags used in creating a website. /p>

Insert your content here. Div tags are the main building blocks in creating a website’s layout.

< br /> – Use this tag to create returns (line breaks) in your paragraphs.
< hr /> – Use this tag to create a horizontal rule on your page.
< table> <tr> <td> </td> </tr> </table> – Use the table tags to create a space for tabular data on your website.

Table Example:
< table>
<tr>
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
<tr>
<td> Data 3 </td>
<td> Data 4 </td>
</tr>
</table>

Data 1
Data 2

Data 3
Data 4

You can use CSS to make the table look much nicer.

Data 1
Data 2

Data 3
Data 4

Here’s the CSS code used to edit the table:
<style>
table{border:1px solid; border-right:none; border-bottom:0; background:#CCC; border-spacing:0; width:350px}
table.td{padding:5px; border-right:1px solid; border-bottom:1px solid; text-align:center}
</style>

I hope this helps you to understand some basics of good web site design remember simple is always better, you want the person who is visiting to be able to navigate your whole site without being confused as to what to click on and what is just images , etc.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s