Web Development Tabs

Objectives
HTML
CSS
JavaScript

Course Objectives

Understanding fundamental concepts of how the web works, including client-side programming, html document's structure, protocols, and standard web technologies.
Construct well-structured web pages using HTML to apply regular and semantic tags to structure content, create tables and forms, and include multimedia content.
Design and style the visual layout of web pages using CSS, demonstrating an understanding of selectors, the box model, and responsive design techniques. Implement a responsive web design that adapts the layout and styling for different screen sizes and devices using CSS media queries.
Implement interactive features on web pages using JavaScript, including handling user events, manipulating the Document Object Model (DOM), and validating form input.
Create a static, multi-page e-Commerce project, demonstrating a basic understanding of web development, styling, cookies, web storage.

HyperText Markup Language

Introduction
HTML Elements
- DOCTYPE
- html
- head
- body
- title
- meta tags
- attributes
- headings
- paragraphs
- links
- Images
- Lists
- Tables
- Forms
Text Formatting
- Make Text Italic
- Create Small text
- Mark Text
- Add a Subscript
- Strong Tag
- Bold Text
- Highlight Text
- Show a Deleted Text
- How to Emphasize Text
- Add a Superscript

Cascade Style Sheets CSS

CSS Rules Syntax

property-name:property-value;

Types of CSS

Inline CSS
- Uses the style attribute on any opening tag of an html element
- Any CSS rule apply i.e. color:red;
- <p style="color:green;">Paragraph text.</p>
Internal/Embedded CSS
- Uses the style html element on the head section of your html element.
- Uses css selectors
  - Element Selectors:
  - ID Selectors
  - Class Selectors
- ```
<head>
    <style>
        /* Element Selector */
        p { text-align: center; }
    </style>
</head>
```
External CSS

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element</title>
</head>
<body>
<img src="http://placekitten.com/300/450" alt="Kitten 1">
<img src="http://placekitten.com/300/500" alt="Kitten 2">
<img src="http://placekitten.com/350/600" alt="Kitten 3">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings Example</title>
</head>
<body>
<h1>Main Page Title</h1>
<p>This is the introductory content of the page.</p>
<h2>Section 1: Introduction</h2>
<p>Details about the first section.</p>
<h3>Subsection 1.1: Overview</h3>
<p>More specific information within Subsection 1.1.</p>
<h2>Section 2: Conclusion</h2>
<p>Concluding remarks for the page.</p>
</body>
</html>

Attribute	Description
_blank	Opens the linked document in a new window or tab.
_self	Opens the linked document in the same frame or window as the link. (Default behavior)
_parent	Opens the linked document in the parent frame.
_top	Opens the linked document in the full body of the window.
framename	Opens the linked document in a specified frame. The frame's name is specified in the attribute.

Element to Link	Source Code
Linking to an image	`<a href="my_image.jpg"><img src="my_image.jpg" alt="My Image"></a>`
Link to an Email Address	`<a href="mailto:someone@company.com">Send Email</a>`
Link to a Phone Number	`<a href="tel:+1234567890">Call Now</a>`
Using a button	`<a href="https://www.company.com"> <button>Visit Example</button> </a>`
Link to Download File	`<a href="file.pdf" download>Download File</a>`
Link Title	`<a href="https://www.company.com" title="Visit Example">Link Text</a>`

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Images</title> </head> <body> <img src="https://images.freeimages.com/images/large-previews/cf1/internet-1237126.jpg?fmt=webp&h=350" alt="Office image"> </body> </html>

Attribute	Description
`src`	Specifies the path to the image file.
`alt`	Provides alternate text for the image, useful for accessibility and when the image cannot be displayed.
`crossorigin`	Allows importing images from third-party sites with cross-origin access, typically used with canvas.
`height`	Specifies the height of the image.
`width`	Specifies the width of the image.
`ismap`	Specifies an image as a server-side image map.
`loading`	Specifies whether the browser should defer image loading or load it immediately.
`longdesc`	Specifies a URL to a detailed description of the image.
`referrerpolicy`	Specifies which referrer information to use when fetching the image.
`sizes`	Specifies image sizes for different page layouts.
`srcset`	Specifies a list of image files to use in different situations, allowing for responsive images.
`usemap`	Specifies an image as a client-side image map.

Attribute

Description

src

Specifies the path to the image file.

alt

Provides alternate text for the image, useful for accessibility and when the image cannot be displayed.

crossorigin

Allows importing images from third-party sites with cross-origin access, typically used with canvas.

height

Specifies the height of the image.

width

Specifies the width of the image.

ismap

Specifies an image as a server-side image map.

loading

Specifies whether the browser should defer image loading or load it immediately.

longdesc

Specifies a URL to a detailed description of the image.

referrerpolicy

Specifies which referrer information to use when fetching the image.

sizes

Specifies image sizes for different page layouts.

srcset

Specifies a list of image files to use in different situations, allowing for responsive images.

usemap

Specifies an image as a client-side image map.

	Abbreviation	File Type	Extension
1.	PNG	Portable Network Graphics.	.png
2.	JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
3.	SVG	Scalable Vector Graphics	.svg
4.	GIF	Graphics Interchange Format	.gif
5.	ICO	Microsoft Icon	.ico, .cur
6.	APNG	Animated Portable Network Graphics	.apng

Abbreviation

File Type

Extension

PNG

Portable Network Graphics.

.png

JPEG

Joint Photographic Expert Group image

.jpg, .jpeg, .jfif, .pjpeg, .pjp

SVG

Scalable Vector Graphics

.svg

GIF

Graphics Interchange Format

.gif

ICO

Microsoft Icon

.ico, .cur

APNG

Animated Portable Network Graphics

.apng

CIS 385 Web Programming I

Course Objectives

HyperText Markup Language

Cascade Style Sheets CSS

CSS Rules Syntax

Types of CSS

Introduction

HTML

HTML Document Sections

HTML Document Template

Elements

HTML Elements parts

Block Type Elements vs. Inline Type Elements

Block Type Element Example

Inline Type Element Example

HTML Module Objectives

Objectives

The <!DOCTYPE> Declaration

Example

The html element

Example

The body element

Example

The head element

Example

The title Element

Example

HTML meta tags

HTML headings

Key characteristics and uses of HTML headings:

Example

Main Page Title

Section 1: Introduction

Subsection 1.1: Overview

Section 2: Conclusion

The paragraph element

Example

More paragraph Examples

The link element

Example

The Target Attribute of HTML Links

Different type of link HTML Elements

Relative URLs

The HTML attributes

Key characteristics of HTML attributes:

Example

HTML Images

Example

In this example:

Various HTML <img> Tag Attributes

Common Image Formats

How to optimize HTML Images Effectively

Various HTML `<img>` Tag Attributes