Scribd
Upload
6 views

Course Intro

Uploaded by

farouk.senro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Course Intro

Uploaded by

farouk.senro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Why learn Web Development?

Why learn Web Development?

I Reach
Today, we have around 12.5 billion web enabled devices.
I Visual Medium
It’s easier to market your product if people can “see” it.
I The Social Nature of the web.
I It’s fun. ;)
I It pays very well. $$
I You can market your own idea (as opposed to having a
“technical co-founder” for your start-up).
I It’s important to do it well.
How it works
What we’ll learn in this course

I HTML 5 - The current standard for the language that


describes the contents of the webpage.
I CSS - Used to add styles to a plain HTML document.
I JavaScript - Makes the website dynamic. Responds to user.
I PHP - Scripting language used on the server side. Used to
connect the website to other utilities.
I We’ll be looking at several JavaScript frameworks including
jQuery, Angularjs and React.js.
I As we progress through the course, elements of basic software
engineering, content management, responsive design and
Material Design will be introduced.
HTML

I HTML is a markup language. It tells the web browser what


content to display.
I Separates content from presentation.
I Uses a pre-defined set of elements to identify content types.
I Elements contain one or more “tags”.
I Tags are surrounded by angle brackets, and the “closing” tag
is prefixed by a forward slash.
HTML Page Structre
HTML Tree Structure
DOCTYPE

I The DOCTYPE is typically the first line of the HTML


document.
I It specifies the version of HTML used on the page.
I HTML5 has a very simple DOCTYPE element.
<!DOCTYPE html>
I HTML4 DOCTYPE element -
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”>
Basics of HTML 5

I Every HTML document (web page) consists of tags and


character data.
I Tags are elements enclosed in angle brackets.
I <html>, <body>, <a>, </a >, </body>, </html>
I Opening and ending tags must be used together.
I Character data is the content between an opening and closing
tag.
<title >Hello World </title >
HTML Elements

I An element is a combination of a tag and its character data.


I <title>Hello World </title>
I <body><p>Welcome to the world </p></body>
I <a href=“www.google.com”>Google </a>
I <br/>
I It is possible to nest elements inside other elements.
I It is possible to have empty element (no content/character
data).
I HTML tags are not case sensitive.
I By convention, tags are written in lowercase.
Attributes

I Attributes provide information about HTML elements.


I An element can have one or more attributes.
I id
I class
I style
I href
I Attributes come in name/value pairs.
<a href=“www.google.com” >Go to Googles website </a>
I Some attributes can be used on any HTML element:
I class: specifies one or more classnames for an element (refers
to a class in a style sheet).
I id: specifies a unique id for an element.
I style: specifies an inline CSS style for an element.
I title: specifies extra information about an element.
HTML Comments

I Comments can be added into the HTML code to make it


readable and understandable.
I Browsers will not display any comments.
I Syntax: <!– –>
E.g., <!– This is my comment –>
Cascading Style Sheets

I CSS stands for Cascading Style Sheets.


I Current Version: CSS 3.
I Styles define how to display HTML elements.
I Styles were added to HTML 4.0 to solve a problem.
I The original purpose of HTML was to combine the structure
and content of the page into one document.
I When presentation elements began to be included in the
document, it increased the complexity and reduced readability.
The Solution
Why CSS?

I Separate the “style” elements from the documents and put it


in a “style sheet”.
I Advantages:
I Styles can be changed easily.
I Document is more readable.
I 3 ways to do styling
I Inline Style - Style elements are included as HTML attributes.
I Internal Style Sheets - A <style>tag is used in the HTML
document to specify the presentation elements. External
Style Sheets - A separate “.css” file is used as a part of your
set of documents. It contains all the styling elements.

You might also like