Scribd
Upload
5 views

Intro

Web Development

Uploaded by

Dhoy Navarro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Intro

Web Development

Uploaded by

Dhoy Navarro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Introduction to Web Development

Lecture 1
CGS 3066 Fall 2016

September 8, 2016

https://ww2.cs.fsu.edu/~jayarama/webdev16/Slides/Intro.pdf
Why learn Web
Development?
Why learn Web
Development?

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

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

►
HTML is a markup language. It tells the web browser
what content to display.
►
Separates content from presentation.
►
Uses a pre-defined set of elements to identify content types.
►
Elements contain one or more “tags”.
►
Tags are surrounded by angle brackets, and the “closing”
tag is prefixed by a forward slash.
HTML Page
Structre
HTML Tree
Structure
DOCTYP
E

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

►
Every HTML document (web page) consists of tags
and character data.
►
Tags are elements enclosed in angle brackets.
) <html>, <body>, <a>, </a >, </body>, </html>
) Opening and ending tags must be used together.
►
Character data is the content between an opening and
closing tag.
<title >Hello World </title >
HTML
Elements

►
An element is a combination of a tag and its character data.
) <title>Hello World </title>
) <body><p>Welcome to the world </p></body>
) <a href=“www.google.com”>Google </a>
) <br/>
►
It is possible to nest elements inside other elements.
►
It is possible to have empty element (no
content/character data).
►
HTML tags are not case sensitive.
►
By convention, tags are written in lowercase.
Attribute
s
►
Attributes provide information about HTML elements.
►
An element can have one or more attributes.
) id
) class
) style
) href
►
Attributes come in name/value pairs.
<a href=“www.google.com” >Go to Googles website </a>
►
Some attributes can be used on any HTML element:
) class: specifies one or more classnames for an element (refers
to a class in a style sheet).
) id: specifies a unique id for an element.
) style: specifies an inline CSS style for an element.
) title: specifies extra information about an element.
HTML
Comments

►
Comments can be added into the HTML code to make
it readable and understandable.
►
Browsers will not display any comments.
►
Syntax: <!– –>
E.g., <!– This is my comment –>
Cascading Style
Sheets

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

►
Separate the “style” elements from the documents and put
it in a “style sheet”.
►
Advantages:
) Styles can be changed easily.
) Document is more readable.
►
3 ways to do styling
) Inline Style - Style elements are included as HTML attributes.
) 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