Scribd
Upload
83 views23 pages

CSC 122 Lecture Note

The document provides an introduction to web design and development, focusing on HTML, CSS, and JavaScript. It explains the structure and elements of HTML, the use of CSS for styling, and the basics of JavaScript for programming web behavior. Additionally, it includes a group project assignment to create a registration form using the learned concepts.

Uploaded by

abdulrahmanmuhammadu222
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
83 views23 pages

CSC 122 Lecture Note

The document provides an introduction to web design and development, focusing on HTML, CSS, and JavaScript. It explains the structure and elements of HTML, the use of CSS for styling, and the basics of JavaScript for programming web behavior. Additionally, it includes a group project assignment to create a registration form using the learned concepts.

Uploaded by

abdulrahmanmuhammadu222
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/ 23

CSC 122

INTRODUCTION TO WEB DESIGN &


DEVELOPMENT

ABUBAKAR SULEIMAN, AUWAL JIBRIN.


Introduction to HTML
What is HTML?

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages

 HTML describes the structure of a Web page

 HTML consists of a series of elements

 HTML elements tell the browser how to display the content

 HTML elements label pieces of content such as "this is a


heading", "this is a paragraph", "this is a link", etc.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Example explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
What is an HTML Element?

 An HTML element is defined by a start tag, some content,


and an end tag:

 <tagname> Content goes here... </tagname>

 The HTML element is everything from the start tag to the


end tag: example;

 <h1>My First Heading</h1>

 <p>My first paragraph.</p>


HTML Forms
 An HTML form is used to collect user input. The user input is most often sent
to a server for processing.

 Example
The HTML <form> Elements
 The HTML <form> element are elements that can be found
inside an html form. It can contain one or more of the
following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <option>
HTML Tables
 HTML tables allow web developers to arrange data into rows
and columns.
 A table in HTML consists of table cells inside rows and columns.
 Example
HTML Styles - CSS
 What is CSS?

 CSS stands for Cascading Style Sheets.

 CSS is the language we use to style an HTML document.

 CSS describes how HTML elements should be displayed.

 With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!
Using CSS

 CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section

 External - by using a <link> element to link to an external CSS file

 The most common way to add CSS, is to keep the styles in


external CSS files.
The CSS element Selector

 The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}

The CSS id Selector


 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element is unique within a page, so the id selector is used to select one
unique element!
 To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the class name.
Example
In this example all HTML elements with class="center" will be red and
center-aligned:
.center {
text-align: center;
color: red;
}

The CSS Universal Selector


The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code
above:
h1, h2, p {
text-align: center;
color: red;
}
Introduction to JavaScript

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages


JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and

changes the element content (innerHTML) to "Hello JavaScript":


JavaScript Variables
Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

•Automatically

•Using var

•Using let

•Using const

Note: It is considered good programming practice to always declare


variables before use.
JavaScript Variables
Example
JavaScript Data Types
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the
type.
JavaScript has 8 Datatypes
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
The Object Datatype

The object data type can contain both built-in objects, and user defined objects:

Built-in object types can be:

objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.
Examples of Datatype in JS
Group Project
Design a simple registration form with the knowledge gain from the study of HTML

and CSS.

Your form should contain the following input fields; Full name, Username, Email,

state, and password.

Ensure the has a label at the top of every input field, and the state must be a select

option.

Validate the form using javascript to accept only email that ends with @nsuk.edu.ng

Submission date: 10th September, 2024


Thank you!

You might also like