HTML, CSS Basics

Website Authoring

HTML

HTML: Hyper Text Markup Language.

Comment: to add the text which you don’t want to display on the browser.

<!—this is a sample comment –>

Heading tag: There are 6 heading tags from H1 to H6, H1 being the largest in size. All the headings are automatically bold.

<h1> Page Heading </h1>

Paragraph:  when you create a new paragraph, it starts with a new line.

<p> Sample Paragraph </p>

Bold, Italic, Underline:

<b> makes the text bold </b>

<i> makes the text italic </i>

<u> makes the text underlined </u>

Tables:

<table> </table>

Always specify the table width in the table tag. Even if it is not asked in the question, it helps in aligning all the elements properly..

<table width:”900px”>

Table border:

<table border=”5px”>

Table Row:

<tr>  </tr>

Table Columns:

<td> </td>

To merge the rows, use rowspan in td. Row span basically tells how many rows the td is going to spread.

<td rowspan=”2″>

</td>

To merge the rows, use colspan in td. Col span basically tells how many columns the td is going to spread.

<td colspan=”2″>

</td>

Image tag:

<img src=”image_name.jpg” alt=”alternative text width=”50px” height=”40px”>

  • Make sure image file location is NOT displayed in the HTML markup, this will be possible only when you store the HTML file and image file in the same folder/location.
  • Alt text is alternative text, which is displayed when the image is not loaded due to slow internet speed.
  • image size can be changed in the markup by specifying the width and the height and can also be changed using image editing tool (do as specified in the question)
  • When you change the width and height in the markup the original image size does not change.
  • To apply hyperlink on an image use <a> tag around the image tag :

<a href=”link” ><img src=”image.jpg”></a>

Audio, Video:

control property is added to the tags so that the use can see play, pause buttons.

autoplay property can be added (optional) to play the medial automatically.

<audio controls autoplay>
  <source src=”audioname.mp3″ type=”audio/mpeg”>
Error Your browser does not support the audio.(this will shown if the browser does not support the audio file)
</audio>

<video width=”400px” height=”240px” controls>
  <source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video.
</video>

Lists:

There are two kinds of lists: ordered and unordered.

Creating ordered list:

<ol>

<li> red </li>

<li> blue</li>

<li> green </li>

<li> yellow </li>

</ol>

Unordered List:

<ul>

<li> red </li>

<li> blue</li>

<li> green </li>

<li> yellow </li>

</ul>

Changing bullet type:

Use the following style:

<ol style=”list-style-type: square;”>

Other commonly used list types are:

{list-style-type: circle;}

ul {list-style-type: square;}

ol {list-style-type: upper-roman;}

ol {list-style-type: lower-alpha;}
Hyperlinks:

Links to another webpage:

<a href=”https://www.cambridgeinternational.org/”> Click Here </a>

Setting the target window for the linked page:

<a href=”https://www.cambridgeinternational.org/” target=_blank> click here </a>  Opens the link in new tab

 <a href=”https://www.cambridgeinternational.org/” target=_self> click here </a>  Opens the link the same tab

Links of the that you have created of locally stored in your work area:

<a name=”Otherpage.html” target=_self> click here </a>  (the location of the page ie. Folder names etc. must not be displayed in the markup)

Links within the page:

There are two steps:

  1. Create the target as bookmark

<a id=top> this is the targe (where user will reach when he click the link, for example you can place this markup on the top or at the end of the page)

  • Create hyperlink to the bookmark

<a href=#top> click here to reach on the top </a>

Note: the name of ID could be anything it will not be visible on the page. (if it is visible then you must’ve made a mistake.

When calling the id in the hyperlink use # symbol in front of it.

You can use <div id =top> as well. Both are correct.

Email Links:

<a href= “mailto: mailid ?subject= “email subject”> Click here to email </a>

Example:

<a href = “mailto:abc@example.com?subject = “Message”>Send Feedback</a>

Cascading Style Sheet (CSS)

CSS is used to create the presentation layer of the webpage.

There are three ways of using CSS:

  1. Inline styling : style tag is added within the markup:

<tr style=”height: 50px;”>

  • External style

A separate file , saves as .css extension is created and attached in the head tag of the html file. Both the css and html files are to be stored in the same folder.

To insert external sheet you have to place the following markup in the head section:

<link rel=”stylesheet” href=”CSS File Name.css”>

  • Internal styling

The style document is defined inside the head tag.

<head>

<style>

</style>

</head>

CSS codes remains the same in all the kinds of styling.

Inline css:

<h1 style=” text-align: center;”>

External CSS

H1{ text-align: center; }

Comments:

/* comment */

Text:

text-align: center;

text-align: left;

text-align: right;

text-align: justify;

Bold:

font-weight: bold;

Italic:

font-style: italic;

Underline:

text-decoration: underline;

Text size:

font-size: 10px;

Font type:

font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;

This is on order of preference, the fonts having multiple words are written within quotes ‘’.

Font family names :

  • sans-serif,
  • serif,
  • monospace,
  • fantasy,
  • cursive

are written at the end and have no quotes.

Colors:

Colors are written in hexadecimal codes:

It starts with # symbol and has 6 alphanumeric characters from 0-9 and A-F.

1,2 two are for shade of Red.

3,4 two are for shade of Green.

5,6 two are for shade of Red.

Fully On: FF

75% on: C0

50% on: 80

25% on: 40

OFF 00

If all the three colors are fully off: #000000 it is black.

If all the three colors are fully on: #ffffff it is white

Background color:

Specify color code as following:

h1 {background-color: #ff0000}

Background Image:

Body{

background-image:url(“imagename.jpg”);

Background-repeat: no-repeat; (or repeat can also be specified.);

Background-position: right top; (sometimes used for showing logo))

}

If you specify the background image in the body tag it will apply the background image on the entire page.

Border color:

Specify color code as following:

h1 {border-color: #ff0000}

Tables:

Align table in the center of the page:

Table{ Margin-left:auto; margin-right: auto;}

Table Border:

External border: specify border in tr

Internal border: specify border in td

Tr{border-width: 2px;}

Td {border-width: 4px;}

Collapsing border: by default there are two borderes in the table.

Table{border-collapse: collapse;}

Table{border-collapse-separate;}

Cell Padding: spacing between text and the td border.

Table{padding: 5px;}

All four sides will have 5px space.

td{

    padding-top: 5px ;

    padding-left: 6px;

    padding-bottom: 5px;

    padding-right: 6px;

}

Border Spacing: spacing between two td’s

Table{border-spacing: 10px;}

This will add spacing from all the four sides.

Table{border-spacing: 10px 20px;}

10px will be added horizontally and 20px will be added vertically.

Vertically aligning text:

td{

vertical-align: top;

}

It could be top, middle or bottom.

Combining the tags

When two or more tags use the same kind of styling you can combine the tags while creating the css, this is considered as an efficient method of creating a stylesheet.

H1,h2,h3{ text-align: center;}

H1,h3{color:#ff00ff;}

Classes in CSS:

class name starts with a full stop [.]

it is similar to specifying styles for tags. It is created within the css document.

.heading{text-align: center;

color: aqua;

text-decoration: underline;}

To use it :

<h1 class=”heading”> this is using a class </h1>

Testing the website:

Functional Testing:

It is to check whether: the website “WORKING” properly as planned.

Are all the hyperlinks are working?

Is the stylesheet attached working as styled?

Are all the images visible?

Are email links working?

There must be no part of html or css code visible on the webpage.

User testing

It is to check whether: Is the website Audience appropriate?

Whether it is fit for the purpose and audience.

Is the audience is able to use the website without any guidance, like hyperlink text should say “click here to know more”, so that it is self-explanatory .

Leave a Reply

Your email address will not be published. Required fields are marked *