Scribd
Upload
3 views29 pages

Web Design Lecture Notes Draft

The document provides an introduction to web design, focusing on HTML, CSS, and JavaScript. It covers the basic structure of HTML documents, including tags, lists, tables, forms, and how to link CSS for styling. Additionally, it explains the use of JavaScript for programming web pages, including variables, conditional statements, loops, and functions.

Uploaded by

Getacher Ashebir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views29 pages

Web Design Lecture Notes Draft

The document provides an introduction to web design, focusing on HTML, CSS, and JavaScript. It covers the basic structure of HTML documents, including tags, lists, tables, forms, and how to link CSS for styling. Additionally, it explains the use of JavaScript for programming web pages, including variables, conditional statements, loops, and functions.

Uploaded by

Getacher Ashebir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Web Design

Introduction to: HTML – CSS – Java Script


Prepared by : Getacher Ashebir
HTML
HTML is stand for Hypertext Markup Language is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies
such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. It
relied on tags < > and <between tags there are the Markup Elements.
HTML code can be written using any text editor, however, the compiler is browser that
will be used, as Chrome or Mozilla.

First Example: The basic commands of HTML will be explained by an example.


<!doctype html> To inform the text editor that the document is an HTML.
<html> Here the starting of the HTML code, it ends when the </html> is typed.
<head> The header of the document has the title and the required definitions , as CSS classes.
<title> Hello </title> The title shown in the HTML window.
</head> Closing of the header.
<body> In body, the text, buttons, and most of tags are exist, in this example the body is
empty.
</body> End of body
</html> End of HTML code.

Some HTML Tags:


Header texts <hx> x=1-6
Line brake <br>
Paragraph <p>

Example:
<!doctype html>
<html>
<head>
<title> Hello </title>
</head>
<body>
<p> TISHK International University </p > <br>
<h1> TISHK International University </h1> <br>
<h2> TISHK International University </h2> <br>
<h3> TISHK International University </h3> <br>
<h4> TISHK International University </h4> <br>
<h5> TISHK International University </h5> <br>
<h6> TISHK International University </h6> <br>
<h7> TISHK International University </h7> <br> <!– no change here
</body>
</html>

Tags ends when we close them, otherwise , it will continue. tags used to be nested inside
each other. Note : Tags in the coming examples will be written inside the body.
<p> text 1<p>
<p> text 2</p>
Or <p>
text 1 text
2</p>

Unordered and Ordered list:


Used for arranging the list. Ordered lists having a
number in front of each element. Unordered lists will
list elements by adding dots. Example:
<h1>Our Departments</h1>
<ul>
<li> IT Department</li>
<li>Medical Analysis></li>
</ul>
Creating Tables:
The table command <table> is used to create the table. The table is created row after row.
If the table row is a header, then <th> is used, and it is shown as bold. When the row
contains data then <td> tag is used.

Example:

<table>
<tr>
<th> Name </th> <!-- this is for header , it will be bold -->
<th> Age </th>
<th> Stage </th>
</tr>
<tr>
<td> Ali </td> <!-- this is for data , it will be correspondent to the hd above -->
<td> 20 </td>
<td> Second </td>
</tr>
<tr>
<td> Saly </td> <td> 21 </td>
<td> Third </td>
</tr>
</table>
WEB Links
Syntax:
<a href=“website link"> Text appear in the page </a> Example:
<a href="http://www.tiu.edu.iq">
Click to visit TISHK Website </a>

Adding Images Syntax:

<img src=“name.extension" width=“num" height=“num">


<!-- the image should be on same folder if no path was specified-->

Data input in HTML

1- Input Box:

The input box is used to enter data as user name and password as shown in the figure.

Example:
<!doctype html>
<html>
<head>
<title> TIU Page</title>
</head>
<body>
<form action =" " method = " " >

<input type =“text" name=" ">


</form>
</body>
</html>
<!– when input type = password then characters will be shown as asterisk.
2- Submit bottom
<form action =" " method = " " >

<input type ="submit" value=" Submit “ name=“ ”>


</form>

3-Radio Bottom Syntax:


<input type ="radio" name="yesno" value=""> <br> <br>

Example
form action =" " method = " " >
Answer : </br> yes
<input type ="radio" name="yesno" value=""> <br> <br>
No
<input type ="radio" name="yesno" value="" > <br> <br>
</form>

4- Check box
<form action =" " method = " " >
Which cities you had visited : </br>
<input type ="checkbox" value="" > Paris <br> <br>
</form>
<input type ="checkbox" value="" > Cairo <br> <br>
</form>
<input type ="checkbox" value=""> Istanbul <br> <br>

5-Number
<form action =" " method = " " >
Exam Mark : </br>
<input type ="number" min="0" max="100"> <br> <br>
</form>

6-Input date/Time/ Number

<form action =" " method = " " >


<input type ="number" min="0" max="100"> <br>
<input type= "date" name="">

<input type= “time" name="">


</form>

7-Drop down list


<form action =" " method = " " >
<select>
<option value=""> Text of the 1st selection </option>
<option value=""> Text of the 2nd selection </option>
<option value=""> Text of the nth selection </option>
</select>
</form>
8- Multiple Line
Syntax
<textarea rows="" cols=""> </textarea> </br>
Example

<textarea rows=“20" cols=“50"> </textarea> </br>

Q: Design the following HTML document :


Title and alt attributes

Title =“ The title that will be shown when the mouse is over the object”

Alt=“” the caption that will be shown the “Alternative” text if the image can not be
loaded.

Example:
<img src="baby.jpg" width="200" height="150" title="Baby image">
<img src="babymissed.jpg" width="200" height="150" title="Baby image" alt="baby
image">

Labels to the input box Syntax:


<label for=" id of the input box "> text to show </label>
<input type ="text" id="id of the input box " name=" ">

<form action = " " method = " " >


<label for="username"> Write The User Name: </label>
<input type ="text" name=" "> <br>
<label for="password"> Write The Password : </label>
<input type ="password" id="password" name=" ">
</form>

The IFRAME (Inline Frame)


It is used to show another page within the current one.
<iframe frameborder="" width="" height="" src="html of
the source" name= "name" id= "id" >
</iframe>
<iframe frameborder="1" width="350" height="350" src="
Mypage.html " name="iframeme" id="iframeme">
</iframe>

Some font tags:


• <sup> : super script
• <sub> : subscript
• <b> for bold
• <i> for italic

Adding Audio
<audio controls>
<source src="Audio.mp3"/>
</audio>
To add autoplay and loop:
<audio controls autoplay loop>
<source src="Audio.mp3"/>
</audio>
Adding Video

<video controls autoplay loop>


<source src="video.mp4"/>
</video>

CSS Cascading Style Sheet

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML. CSS is designed to enable the
separation of presentation and content, including layout, colors, and fonts.
CSS is called in the header to define the formatting for each tag as explained in the
example below:

<!doctype html>
<html>
<head>
<title> welcome</title>
</head>
<style> h1
{
color:Red; <!—in this part we defined that each h1 tag will be in red color. Any formatting
related to h1 will be written inside these two brackets.
}
</style>
<body>
<h1> TISHK University</h1> The Sentence TISHK university will appear in red color
</body>
</html>

Ex2:
<!doctype html>
<html>
<head>
<title> My Page</title>
</head>
<style> h1,h2{
Background-color:blue <!-- Here, both h1 and h2 formatting will be changed.>
}
</style>
<body>
<h1> Tishk first Test </h1>
<p> Here is the introduction about university </p>
<h2> Contact page will be here </h2>
<p> Email us at something@tiu </p>
</body>
</html>

In case of :
Body{
Color=red;
}
All the body will be red, however, if we add individual color to <h1> for example it will
overwrite the old one , i.e. the body.
Changing Font
</head> <style> h1{
background-color:blue;
}
p{ color:blue;
font-size: 25px;
font-family:Arial;
}
</style>
<body>
<h1> Tishk first Test </h1>
<p> Here is the introduction about university </p>
<h2> Contact page will be here </h2>
<p> Email us at something@tiu </p>
</body>
</html>

Border ( bottom, top, right, left)


In border command the location is written ( if not it will be in all directions) and then the
width, type and color are specified.
h2 {
border-bottom:2px solid blue;
}
h1{
border : 1px solid red;
}
Classes in CSS:
Classes are used when more than on tag (ex <p>) inside the text are exist and we need to
apply different format for each of them.
Example :
</head> <style> p.blue { color: blue;
}
p.red {
color: red
}
</style>
<body>
<p class=blue> Here is the blue class </p>
<br>
<p class=red> Here is the red class </p>
</body>

To use the CLASS in more than one tag, use the class without a name.

<!doctype html>
<html>
<head>
<title> CSS lectures</title>
</head>
<style>
.blue {
color: blue;
}
</style>

<body>
<h1 class=blue> Here is the blue header1 </h1> <h2
class=blue> Here is the blue header2 </h2>
<br>
<p class=blue> Here is the blue paragraph </p>
</body>
</html>

Creating External CSS file


The external CSS file ( *.css) is used to specify the formatting in a separate file so it can be
used with multiple HTML files. i.e , the *.css file will be created one time and can be used
for any HTML document.
To create and link a CSS file follow the steps:
1. Paste the contents under style as a separate text file and save it as *.css example :
ExternalCSS_1.css
2. Call the content in the HTML file using the following command :
<link rel="stylesheet" type="text/css" href="ExternalCSS_1.css">
3. The CSS should be in the same folder or specify the complete path.
4. Note that the CSS file contains all the CSS commands in style tag.

Example:
In this example the css file Colors.css will be called by the html file.
CSS FILE
Colors.css p.par1
{
color:blue;
}
p.par2
{
color:red;
}
p.par3
{
color:green;
}

HTML File:
<!doctype html>
<html>
<head>
<title> CSS lectures</title>

<link rel="stylesheet" type="text/css" href=“Colors.css">


</head>

<body>
<p class=par1> Here is the normal paragraph </p>
<p class=par2> Here is the normal paragraph </p> <p
class=par3> Here is the normal paragraph </p>
</body>
</html>

CSS Box Model

Every element we have in HTML . <P> <h1> <h2> .. Etc has Content, padding, border
and Margin to make the design consistent and keep the spaces between elements.

1- Content: The background color which will show the content box.

In CSS file this is tagged as par1 (as shown in color example before) a text will be
written in HTML.

p.par1
{
color:blue;
background-color:yellow;
}

Content

2- Padding : Padding is the place between the color and text.


p.par1
{
color:blue;
background-color:yellow;
padding: 25px; <!– This is for all sides-->
<!– it can be specified as in image->
}

3- Border : it surrounds the contents with padding p.par1


{
color:blue; background-
color:yellow; padding: 25px;
border-color: red; border-width:
5px; border-style: solid;
}

4- Margin : The space between the element and the page. p.par1
{
color:blue; background-color:yellow;
padding: 25px; border-color: red;
border-width: 5px; border-style: solid;
Margin: 60px;
}

The margin can be specified as left-right , top


and bottom.

Images with CSS Box:


In the HTML file:
<img class="imgclass" src="AGalaxy.png">

In the CSS file :


In CSS File
.imgclass
{
display:block;
margin-left:auto; margin-
right:auto; padding: 10px;
background-color:silver;
border-color: blue; border-
width: 5px; border-style: solid;
}
JAVA SCRIPT

JavaScript is the programming language that can be used to program the Web pages.
It is written between <script> tags.
It can be written inside the HTML, but as CSS, creating a separate file for JavaScript
(*.js) and called by HTML is preferred for reusability and ease of coding.
The js file will be created in text editor and saved, for example code.js.
Then it will be called in the HTML file within the head using the following command:

<script src=“code.js”>
</script>

First Example:
In this code the Code.js file will be called in Webpage.html to show a statement. The
function document.write is used as a JavaScript command.

Code.js: document.write("This statement is written inside


JS file");

Webpage.html:
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<form>
</body>
</html>
Variables in JS
In java script, variables can be a number, string or Boolean. Even if it is not compulsory
to write the command “var” but it is preferred for code understanding. Code.js: ( In
HTML file only calling is required) var x=4; var y=7; var z=x+y; document.write(“The
addition result is ” + z) //+z to show two elements the text and the value.

IF Conditional Statement Syntax:


if(condition)
{ Statements to run when the condition is true} else
{in case of the condition is not true}

Example:
var x=4; var y=7;
if (x > y) {
document.write ( "x is greater than y and it is equal to " + x );
} else
{document.write ( "y is equal to or greater than x and it is equal to " + y); }
For Loop Statement Syntax
:
for ( initial value; final value; condition)
{
Repeated Statement(s)
}

Example:
for (var i=1;i<=5;i++)
{
document.write(" This is the repeated statement... ");
}

Syntax :

var Arrayname= [ elment 1, element 2, …. Element n]

Example: var users=["Ahmed Saad", "Ali Salim", "Layla


Mohammed",]; document.write (users[0]);
//The first user “Ahmed Saad” will be shown

Functions:
Function are used to reduce the code complexity and to be reused multiple times. The
function is defined and then called. The example below shows “add” function which
receive two numbers and find the summation.

function add(x, y) //defining


{
z=x+y;
document.write(" The addition result is " + z);
}
add( 7 , 9); //calling

The previous function sends the results directly to the page, however; if it is required to
return the result of the function to the code, the following example is used:

function add(x, y)
{
z=x+y;
return (z);
}

m= add( 7 , 8);

document.write(" The addition result is " + m);

Applying JS codes in HTML buttons

Changing text style using java script:


In this code, the font color and background for a certain paragraph will be changed after
pressing a button.
In Webpage.html file, the id=text-1 is used as identifier for the paragraph. Then <button>
element is added with the property onclick, which is used to call a function called
changeStyle. The changeStyle function is called from the Code.js file. Which is responsible
of changing the font color.
In Code.js file, the document.getElementById is called to call the element by ID (Elements
can be called by other ways as class or tag). Then the same ID is specified and the style
properity is called. The color is the target for the style in this case, hence it is changed to
“blue”.

//Webpage.html
<!doctype html><!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> TISHK INTERNATIONAL UNIVERSITY </p>
<button onclick="changeStyle()"> Submit </button>
</body>
</html>

//Code.js function
changeStyle()
{
document.getElementById("text-1").style.color="blue";
}

Changing text contents


innerHTML is used to set the text inside the element. For the paragraph of the id : text-1
the text is changed from Old Text to New Text after pressing on the button.

//Webpage.html
<!doctype html><!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> Old Text </p>
<button onclick="changeText()"> Submit </button>
</body>
</html>

//Code.js function
changeText()
{
document.getElementById("text-1").innerHTML=" New Text";
}

Reading text contents


In the previous example, the text in the paragraph tag <p> ( with ID text-1) is changed. In
this example the text will be read by the code and to ensure of reading it correctly, it will
be copied to the next paragraph (id text-2).

//Website.html
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> This text will be copied </p> <br>
<p id="text-2"> This text will be changed to be like the text above </p>
<button onclick="changeText()"> Submit </button>
</body>
</html>

//Code.js function
changeText()
{
var myText=document.getElementById("text-1").innerHTML;
document.getElementById("text-2").innerHTML=myText;
}
Reading Input text contents:
In this example, the input of the user using input text box will be read and copied to the
paragraph.

//Website.html
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> This text will be copied :</p>
<input type ="text" id="input-1" name=" ">
<p id="text-2"> This text will be changed to user input </p>
<button onclick="changeText()"> Submit </button>
</body>
</html>

Code.js function
changeText()
{
var myText=document.getElementById("input-1"); var
oldtext=myText.value;

var updateMe=document.getElementById("text-1"); updateMe.innerHTML=oldtext;


}

Password Validation
In this section, the user input will be checked if it is match the saved password (1234) or
not. If the password is true , the sentence “ Successful Login” will be shown, otherwise,
the sentence “Wrong password” will be shown. Note that if statement is required to check
the validity of the input text.
Website.html
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p> Please Enter The Password :</p>
<input type ="text" id="input-1" name=" ">
<p id="text-1"> The Login result will be shown here </p>
<button onclick="checkPassword()"> Submit </button>
</body>
</html>
Code.js
function checkPassword()
{
var myText=document.getElementById("input-1").value;

if (myText=="1234")
document.getElementById("text-1").innerHTML="Successful Login";
else
document.getElementById("text-1").innerHTML="Wrong Password";
}

//Q: Use the for loop to count the number of login attempts and show it on the page.

You might also like