Web development

HTML (HyperText Markup Language)

− A collection of symbols (tags)

− Specify the content of a webpage

CSS (Cascading Style Sheets)

Specify the format and appearance of content

JavaScript

Language for writing scripts to control a webpage’s behavior

A webpage is

a document that contains tags written in HTML

A webpage tags code to do what

identify (“mark up”) the content

Webpages contain

headings, paragraphs, hyperlinks, images, videos, forms, buttons, and more

HTML5 is

The current version

Web developers use CSS to specify:

− Colors

− Position

− Alignment

− Fonts

− Background images

CSS can

define styles to specify how they will appear on different screen sizes

Client-side scripts

− Scripts that run in your browser to control a webpage’s behavior

− Can also be used to make website interactive

• You also can use JavaScript to

Display a slideshow of photos and images

− Click a button to display text in larger or smaller font size

Static website

Provides content that is unlikely to change frequently

Provides content that changes when you interact with it or is unique to each user

Dynamic website

Scripting language:

Python, Java, JavaScript, PHP, Ruby, C#

Script:

A series of commands embedded into a webpage

Server-side scripts

Scripts that run on a server to process data to interact with website content

Web address

The unique address on the Internet where a webpage resides

other name for Web Address

URL

Responsive Design

Pages with responsive design automatically adjust their size to display relative to the screen size of the device

Because of Responsive Design users don’t have to

− Scroll from left-to-right

− Adjust text or graphics

Website builder

A tool used to create professional looking websites

To use a website builder:

1. Sign up for the service

2. Select a template or design

3. Choose domain name

4. Set up SEO and site options

5. Customize the design and enter content

Content management system (CMS)

Software that lets a group of users maintain and publish content

Text editor

App such as Notepad (Windows) or TextEdit (Mac)

− Use to enter programming code for webpage

Integrated Development Environment (IDE)

▪ Advanced code editing

▪ Debugging

▪ File management

▪ Publishing

− Some IDE tools

Code editor:

Text editor that has additional features

Project:

The files and folders relating to a website

Domain name registrar:

Organization that sells and manages domain names

(GoDaddy)

Uptime

Measure of the percent of time a website is online

Website analytics

Provide a set of measurements used to understand how people use your website

− Number of visitors

− Geographic location of visitors

Site organization dat

can be used to reorganize information and content

Site performance data can be used

to determine when to increase bandwidth

• Traffic sources identifies

how visitors find your site to determine where to spend marketing funds

• Site design data

shows the length of time visitors stay on the site and what pages they visit to help inform site design decisions

XML (Extensible Markup Language)

Open-source markup language

− Used to classify data and share between apps 

E-commerce uses  XML

to provide ways to compare products

XML-structured data can be used to

update website content without the need to be reformatted

HTML

Describes content and how to present it

− Stores layout information in a text format for browsers to interpret

− Uses predefined tags to describe content placement

XML

− Describes data without specifying how to present it

− Stores data in text format to share between applications

− Uses customized tags to describe data in context

Website builders and CMS tools generate

HTML, CSS, and JavaScript code

Learning to code can give you finer control

− Can design your own website or template

− W3Schools is an online reference with tutorials and examples

File Transfer Protocol (FTP) client

An app used to upload and download files between:

▪ Computer

▪ Web server

HTML tags

Written in lowercase characters

− Enclosed with angle brackets

− Most come in pairs

− Closing tags begin with a forward slash (/)

Attribute

Additional information is needed to specify the tag

Title

Descriptive text that identifies the webpage and appears on a browser tab

Heading

Indicate webpage sections and levels (<h1> to <h6>)

Paragraph

(<p>, </p>)

Line break

(<br>)

− One-sided tag

No closing tag

Banner 

Graphic that identifies the website

− Often at the top of each page

<img>

Most websites can display

JPEG, GIF, and PNG images

Unordered list

- Collection of items in list format

− Bullets

− (<ul>, </ul>)

Ordered lists

− Each item preceded by a number

− (<ol>, </ol>)

Links can be

text or image

Links

Click to navigate to webpage, download a file, or send an email

External link

Link to another website

Relative web reference:

Identifies the location of webpage and files in the

current website

Absolute web reference:

Identifies the location of the webpage and files on another website

Multimedia

Audio (speech, music) or video

Embedded content

Played on the website instead of media sharing site

HTML5 tags

<audio> and <video>

Attributes of multimedia

autoplay, controls, width, height

Embed external content using media sharing sites

Soundclopud or Youtube

Validate HTML Code

World Wide Web Consortium (W3C) oversees HTML standards

Deprecated HTML code

Tags identified as obsolete

− Still can use, but not recommended

Publishing a Website

Transferring files from your local computer to a web server

Local computer

The computer storing the files you will publish to an FTP server

Remote web server

A web server on the Internet

Embedded style

− Within the <style>, </style> tags

− Apply to all tags of one type on the webpage

Inline style

− Specified as a style attribute of most HTML tags within the body

Style sheet

− File used to create a consistent appearance across all pages in the website

Colors

Most browsers recognize common color names

• Use the rgb() function to specify colors

red, green, blue components as numbers

0 absence of color

▪ 255 fullness of a color

Hexadecimal numbers

− Between 00 and FF