WEBSITE

DEVELOPMENT
TRAINING
Editors

■ VISUAL STUDIO CODE

■ SUBLIME
Database

■ Xampp
 HTML Tags

■ HTML tags are keywords surrounded by angle brackets like < >
■ HTML tags normally come in pairs like <b> and </b>
■ The first tag in a pair is the start tag, the second tag is the end tag
■ Start and end tags are also called opening tags and closing tags
■ The HTML code (in blue) is made up of characters that live inside angled brackets —
these are called HTML elements.
■ Elements are usually made up of two tags: an opening tag and a closing tag. (The
closing tag has an extra forward slash in it.)
■ Each HTML element tells the browser something about the information that sits
between its opening and closing tags.
Types of Elements
 Empty
These elements have only start tag and no end tag. These
elements have no parameter. It can take attributes that are given along
with the tag name.

 Container

Container elements are paired that is they have start and end tags

7
HTML Attributes

■ HTML elements can have attributes

■ Attributes provide additional information about an element
■ Attributes are always specified in the start tag
■ Attributes come in name/value pairs like: name="value"

<img src="img_girl.jpg" width="500" height="600">

BASICS
 Paragraph

■ To create a paragraph, surround the

words that make up the paragraph
with an opening <p> tag and closing
</p> tag.
line break

■ <br />
As you have already seen, the browser will
automatically show each new paragraph or
heading on a new line. But if you wanted to
add a line break inside the middle of a
paragraph you can use the line break tag
<br />.
 The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves
both spaces and line breaks:
Headings

■ HTML has six "levels" of headings:

■ <h1> is used for main headings
■ <h2> is used for subheadings
■ If there are further sections under the
subheadings then the <h3> element is
used, and so on...
Styling headings/paragraphs

<h1 style="font-size:75px; background-

color:blue; color:white; font-
family:cursive; text-align:right;" >
</h1>
Bold

<b>
■ By enclosing words in the tags <b>
and </b> we can make characters
appear bold.
■ The <b> element also represents a
section of text that would be
presented in a visually different way
(for example key words in a
paragraph) although the use of the
<b> element does not imply any
additional meaning.
Italic

■ <i>
■ By enclosing words in the tags <i> and
</i> we can make characters appear italic.
■ The <i> element also represents a section
of text that would be said in a different
way from surrounding content — such as
technical terms, names of ships, foreign
words, thoughts, or other terms that would
usually be italicized.
superscript & subscript

■ <sup>
The <sup> element is used to contain
characters that should be superscript such as
the suffixes of dates or mathematical
concepts like raising a number to a power
such as 22.
■ <sub>
The <sub> element is used to contain
characters that should be subscript. It is
commonly used with foot notes or chemical
formulas such as H20.
horizontal rule

■ <hr />
To create a break between
themes — such as a change of
topic in a book or a new scene in
a play — you can add a
horizontal rule between sections
using the <hr /> tag.
abbreviations & acronyms

■ <abbr> <acronym>
If you use an abbreviation or an
acronym, then the <abbr> element
can be used. A title attribute on the
opening tag is used to specify the
full term.
Changes to content

■ <ins> <del>
The <ins> element can be used to show
content that has been inserted into a
document, while the <del> element can
show text that has been deleted from it.
LISTS
 Ordered Lists

<ol>
The ordered list is created with the <ol>
element.

<li>
Each item in the list is placed between an
opening <li> tag and a closing </li> tag.
(The li stands for list item.)
Unordered list

<ul>
The unordered list is created with the <ul>
element.
<li>
Each item in the list is placed between an
opening <li> tag and a closing </li> tag.
(The li stands for list item.)
definition Lists

<dl>
■ The definition list is created with the <dl> element and usually consists of a series of
terms and their definitions.
■ Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.
<dt>
■ This is used to contain the term being defined (the definition term).
<dd>
■ This is used to contain the definition.
Nested lists

■ You can put a second list

inside an <li> element to
create a sublist or nested
list.
LINKS
Links

Links are the defining feature of the web because they allow you to move from one web
page to another — enabling the very idea of browsing or surfing.
You will commonly come across the following types of links:
■ Links from one website to another
■ Links from one page to another on the same website
■ Links from one part of a web page to another part of the
■ Links that open in a new browser window
■ Links that start up your email program and address a new
Linking to other Pages on the same site

■ When you are linking to other

pages within the same site, you do
not need to specify the domain
name in the URL. You can use a
shorthand known as a relative URL.
■ If all the pages of the site are in the
same folder, then the value of the
href attribute is just the name of the
file.
Writing Links

Links are created using the <a> element. Users can click on anything between the opening
<a> tag and the closing </a> tag. You specify which page you want to link to using the href
attribute.
 email Links

■ mailto:
To create a link that starts up the user's email
program and addresses an email to a specified
email address, you use the <a> element. However,
this time the value of the href attribute starts with
mailto: and is followed by the email address you
want the email to be sent to.
On the right you can see that an email link looks
just like any other link but, when it is clicked on,
the user's email program will open a new email
message and address it to the person specified in
the link.
Linking to A specific Part of the same Page
Linking to A specific part of another page

■ If you want to link to a specific part of a different page (whether on your own site or a
different website) you can use a similar technique.
■ As long as the page you are linking to has id attributes that identify specific parts of the
page, you can simply add the same syntax to the end of the link for that page.
■ Therefore, the href attribute will contain the address for the page, followed by the #
symbol, followed by the value of the id attribute that is used on the element you are
linking to.
Example
<a href="images_link.html#firstimage">View first image on images web page</a>
Comments
■ <!-- This is a comment -->
■ <!--
This paragraph,
is also a
comment...
-->
Special HTML
■ &lt; → <
■ &gt; → >
■ &amp; → &
■ &nbsp; → space
IMAGES
height & Width of Images
Where to place Images In Your Code

Where an image is placed in the code will affect how it is displayed. Here are three
examples of image placement that produce different results:
1: before a paragraph The paragraph starts on a new line after the image.
2: Inside the start of a paragraph The first row of text aligns with the bottom of the image.
3: In the middle of a paragraph The image is placed between the words of the paragraph
that it appears in.
aligning Images horizontally
aligning Images Vertically
TABLES
What's a Table?

■ A table represents information in a grid format. Examples of tables include financial

reports, TV schedules, and sports results.
 basic Table structure
■ <table>
The <table> element is used to create a table. The contents of the table are written out row
by row.
■ <tr>
You indicate the start of each row using the opening <tr> tag. (The tr stands for table row.)
It is followed by one or more <td> elements (one for each cell in that row).
At the end of the row you use a closing </tr> tag.
■ <td>
Each cell of a table is represented using a <td> element. (The td stands for table data.)
At the end of each cell you use a closing </td> tag.
Tables
■ <table>...</table>
■ <tr>...</tr> for each row
■ <td>...</td> for each element in a row
■ <th>…</th> for header row
 Spanning columns
■ Sometimes you may need the entries in a table to stretch across more than one column.
■ The colspan attribute can be used on a <th> or <td> element and indicates how many columns
that cell should run across.
■ In this example, you can see a timetable with five columns; the first column contains the heading
for that row (the day), the remaining four represent one hour time slots.
■ If you look at the table cell that contains the words 'Geography' you will see that the value of the
colspan attribute is 2, which indicates that the cell should run across two columns. In the third
row, 'Gym' runs across three columns.
■ You can see that the second and third rows have fewer <td> elements than there are columns.
This is because, when a cell extends across more than one column, the <td> or <th> cells that
would have been in the place of the wider cells are not included in the code.
Spanning rows

■ You may also need entries in a table to stretch down across more than one row.
■ The rowspan attribute can be used on a <th> or <td> element to indicate how many
rows a cell should span down the table.
■ In this example you can see that ABC is showing a movie from 6pm - 8pm, whereas the
BBC and CNN channels are both showing two programs during this time period (each
of which lasts one hour).
■ If you look at the last <tr> element, it only contains three elements even though there
are four columns in the result below. This is because the movie in the <tr> element
above it uses the rowspan attribute to stretch down and take over the cell below.
Width and spacing
■ The width attribute was used on the opening <table> tag to indicate how wide that table
should be and on some opening <th> and <td> tags to specify the width of individual
cells. The value of this attribute is the width of the table or cell in pixels.
■ The columns in a table need to form a straight line, so you often only see the width
attribute on the first row (and all subsequent rows would use that setting).
■ The opening <table> tag could also use the cellpadding attribute to add space inside each
cell of the table, and the cellspacing attribute to create space between each cell of the
table. The values for these attributes were given in pixels
border & background

■ The border attribute was used on both the

<table> and <td> elements to indicate the
width of the border in pixels.
■ The bgcolor attribute was used to
indicate background colors of either the
entire table or individual table cells. The
value is usually a hex code (which we
discuss on pages 249-252).
FORMS
Form
■ The best known form on the web is probably the search box that sits right in the middle
of Google's homepage
There are several types of form controls that you can use to collect
information from visitors to your site
Form structure
<form>
Form controls live inside a <form> element. This element should always carry the action attribute
and will usually have a method and id attribute too.

action
Every <form> element requires an action attribute. Its value is the URL for the page on the server
that will receive the information in the form when it is submitted.

method
Forms can be sent using one of two methods: get or post.
With the get method, the values from the form are added to the end of the URL specified in the
action attribute. The get method is ideal for:
■ short forms (such as search boxes)
■ when you are just retrieving data from the web server (not sending information that should be
added to or deleted from a database)
Text input
 password Input
<input>
type="password" When the type attribute has a value of password it creates a text box that acts
just like a single-line text input, except the characters are blocked out. They are hidden in this
way so that if someone is looking over the user's shoulder, they cannot see sensitive data such as
passwords.
name
The name attribute indicates the name of the password input, which is sent to the server with the
password the user enters.
textarea

<textarea>
■ The <textarea> element is used to create a mutli-line text input. Unlike other input
elements this is not an empty element. It should therefore have an opening and a closing
tag.
■ Any text that appears between the opening <textarea> and closing </textarea> tags will
appear in the text box when the page loads.
■ If the user does not delete any text between these tags, this message will get sent to the
server along with whatever the user has typed.
Radio button
<input>
■ type="radio" Radio buttons allow users to pick just one of a number of options.
name
■ The name attribute is sent to the server with the value of the option the user selects. When
a question provides users with options for answers in the form of radio buttons, the value
of the name attribute should be the same for all of the radio buttons used to answer that
question.

value
■ The value attribute indicates the value that is sent to the server for the selected option. The
value of each of the buttons in a group should be different (so that the server knows which
option the user has selected).

checked
■ The checked attribute can be used to indicate which value (if any) should be selected when
the page loads. The value of this attribute is checked. Only one radio button in a group
should use this attribute.
checkbox

<input>
■ type="checkbox" Checkboxes allow users to select (and unselect) one or more options in
answer to a question.
name
■ The name attribute is sent to the server with the value of the option(s) the user selects. When
a question provides users with options for answers in the form of checkboxes, the value of
the name attribute should be the same for all of the buttons that answer that question.
value
■ The value attribute indicates the value sent to the server if this checkbox is checked.
checked
■ The checked attribute indicates that this box should be checked when the page loads. If used,
its value should be checked
drop down list box
<select>
■ A drop down list box (also known as a select box) allows users to select one option
from a drop down list.
■ The <select> element is used to create a drop down list box. It contains two or more
<option> elements.
name
■ The name attribute indicates the name of the form control being sent to the server, along
with the value the user selected.
<option>
■ The <option> element is used to specify the options that the user can select from. The
words between the opening <option> and closing </option> tags will be shown to the
user in the drop down box.
value
■ The <option> element uses the value attribute to indicate the value that is sent to the
server along with the name of the control if this option is selected

selected
■ The selected attribute can be used to indicate the option that should be selected when the
page loads. The value of this attribute should be selected.
■ If this attribute is not used, the first option will be shown when the page loads. If the user
does not select an option, then the first item will be sent to the server as the value for this
control.
 Multiple select box
<select>
■ size You can turn a drop down select box into a box that shows more than one option by
adding the size attribute. Its value should be the number of options you want to show at
once. In the example you can see that three of the four options are shown.
■ Unfortunately, the way that browsers have implemented this attribute is not perfect, and it
should be tested throroughly if used (in particular in Firefox and Safari on a Mac).
multiple
■ You can allow users to select multiple options from this list by adding the multiple attribute
with a value of multiple.
File Input box

<input>
■ If you want to allow users to upload a file (for example an image, video, mp3, or a
PDF), you will need to use a file input box.

type="file"
■ This type of input creates a box that looks like a text input followed by a browse button.
When the user clicks on the browse button, a window opens up that allows them to
select a file from their computer to be uploaded to the website
Submit button

<input> type="submit"
■ The submit button is used to send a form to the server.
name
■ It can use a name attribute but it does not need to have one.
value
■ The value attribute is used to control the text that appears on a button. It is a good idea to
specify the words you want to appear on a button because the default value of buttons on
some browsers is ‘Submit query’ and this might not be appropriate for all kinds of form.
 Grouping Form elements
<fieldset>
■ You can group related form controls together inside the
<fieldset> element. This is particularly helpful for
longer forms.
■ Most browsers will show the fieldset with a line around
the edge to show how they are related. The appearance
of these lines can be adjusted using CSS.
<legend>
■ The <legend> element can come directly after the
opening <fieldset> tag and contains a caption which
helps identify the purpose of that group of form
controls.
CSS

■ CSS is used to control the style of a web document in a simple and easy way.
■ CSS is the acronym for "Cascading Style Sheet".

Why Learn CSS?

■ Without CSS, every web page would be drab plain text and images that flowed straight
down the page. With CSS, you can add color and background images and change the
layout of your page — your web pages can feel like works of art!
Using The class Attribute
The HTML class attribute is used to define equal styles for elements with the same class
name.
So, all HTML elements with the same class attribute will get the same style
The Type Selectors
Gives a color to all level 1 headings
Multiple Style Rules
■ You may need to define multiple style rules for a single element. You can define these
rules to combine multiple properties and corresponding values into a single block as
defined in the following example −
External CSS - The <link> Element
■ The <link> element can be used to include an external stylesheet file in your
HTML document.
■ An external style sheet is a separate text file with .css extension. You define all
the Style rules within this text file and then you can include this file in any
HTML document using <link> element.
Example
<link rel ="stylesheet" href="style.css">

The css sheet is named style.css

Connecting to a database

■ Companies and organizations have websites to display content including text, images,
and data that introduce themselves to their users. Therefore, using a database to store
this essential information is the most common approach for many websites.
■ If your organization’s data is stored in a database, you may need to use a database
management system like MySQL or PostgreSQL to perform tasks to present the data
accurately on the website
See folder database connection for code example
■ Database name: kyudb
■ Table: auth
JAVA SCRIPT
Why java script?

JavaScript; is used to program the behavior of web

pages/used to make web pages interactive .

88
Example of js code inserted in html to display
a message when a button is clicked
<body>
<!--javascript-->

<button id="btn"> REGISTER </button>

<script>
var button=document.getElementById("btn");
button.addEventListener("click",function() {
alert("Registered Sucessfully");
});

</script>
</body>