html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
, ,

,

and more.">
Scribd
Upload
97 views

Web Development Foundation Study Guide: Cygen Technology 1

The document provides an overview of key concepts in web development including: 1. HTTP and HTTPS protocols for communication between clients and servers. HTTP methods include GET and POST. 2. Front-end technologies like HTML5, CSS3, JavaScript, jQuery and Bootstrap for building user interfaces. Back-end technologies like PHP and MySQL for server-side processing. 3. HTML elements, tags, attributes and basic page structure using tags like <html>, <head>, <body>, <h1-6>, <p>, <div> and more.

Uploaded by

Bruno Hlaing Wayne Aung
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
97 views

Web Development Foundation Study Guide: Cygen Technology 1

The document provides an overview of key concepts in web development including: 1. HTTP and HTTPS protocols for communication between clients and servers. HTTP methods include GET and POST. 2. Front-end technologies like HTML5, CSS3, JavaScript, jQuery and Bootstrap for building user interfaces. Back-end technologies like PHP and MySQL for server-side processing. 3. HTML elements, tags, attributes and basic page structure using tags like <html>, <head>, <body>, <h1-6>, <p>, <div> and more.

Uploaded by

Bruno Hlaing Wayne Aung
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/ 25

Web Development Foundation

Study Guide

CYGEN TECHNOLOGY 1
• The Hypertext Transfer Protocol (HTTP) is designed to
enable communications between clients and servers.

HTTP Methods
• GET
• POST

HTTP and HTTPS

• http (8080,80) – not secure, use plain text


• https (443) – use ssl (secure socket layer), encrypt

CYGEN TECHNOLOGY 2
For Font-End
• HTML 5 - Structure
• CSS 3 - Presentation
• JavaScript - Behavior
• JQuery
• Bootstrap 4

For Back-End
• PHP – Hypertext Pre-processor
• MySQL - Database

CYGEN TECHNOLOGY 3
HTML (Hypertext Markup Language)

• HTML is the standard markup language for creating Web pages.


• HTML stands for Hyper Text Markup Language
• 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 are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

CYGEN TECHNOLOGY 4
• In 1989, Tim Berners-Lee invented the World Wide Web.
• He wrote the first version of the Hypertext Markup Language.
• In October 1994, Tim Berners-Lee founded the World Wide Web Consortium (W3C) at the
Massachusetts Institute of Technology.

HTML Versions

• HTML - 1991
• HTML 2.0 - 1995
• HTML 3.2 - 1997
• HTML4.01 - 1999
• XHTML - 2000
• HTML5 - 2014

CYGEN TECHNOLOGY 5
We can use two types of software when we’re learning Web Development.
• Code Editors
• Integrated Development Environment (IDE)

Code Editor
• Notepad (Windows)
• Notepad++
• Sublime Text 3
• Brackets
• Vim
• Visual Studio Code & etc…

IDE
• NetBeans
• WebStorm
• PhpStorm
• PyCharm
• Komodo & etc…

CYGEN TECHNOLOGY 6
We should declare HTML version before we start writing the codes.

HTML Version Declarations

For HTML-5

<!DOCTYPE html>

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN”


http://www.w3.org/TR/html4/loose.dtd>

7
CYGEN TECHNOLOGY
HTML Elements

HTML consists of a series of elements. An HTML element usually consists of a start tag and an end tag, with
the content inserted in between.

<tagname> Content goes here… </tagname>

HTML Nested Elements

HTML elements can be nested (elements can contain elements).

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

CYGEN TECHNOLOGY 8
Heading Tags

<h1> to <h6>

<h1> Page Title </h1>


<h2> Secondary Title </h2>
<h3> Sub Header Title </h3>
<h4> Another Sub Header </h4>
<h5> Another Sub Header </h5>

<h6> Another Sub Header </h6>

Paragraph Tag

<p> This is Paragraph. </p>

CYGEN TECHNOLOGY 9
• All HTML elements can have attributes.
• Attributes provide additional information about an element.
• Attributes are always specified in the start tag.
• Attributes usually come in name/value pairs like: name = “value”.

Example

<!DOCTYPE html>
<html>
<head>
<title> Document </title>
</head>
<body>
<img src =“images/logo.jpg” width=“200” height=“100”>
</body>
</html>

CYGEN TECHNOLOGY 10
<u> This is Underline Tag. </u>

<i> This is Italic tag. </i>

<del> This is Delete tag. </del>

<ins> This is Insert tag. </ins>

<b> This is Bold tag. </b>

<mark> This is Mark tag. </mark>

<sup> This is Superscript tag. </sup>

<sub> This is Subscript tag. </sub>

<code> This is Code tag. </code>

<xmp> This is xmp tag. </xmp>

CYGEN TECHNOLOGY 11
Abbreviation Tag

<abbr title=“World Health Organization.”> WHO. </abbr>

Bi-Directional Tag

• bdi
• bdo – (dir=“rtl” or “ltr”)

<bdi> ‫< إيان‬/bdi>


<bdo dir=“rtl”> ‫< إيان‬/bdo>

Attribute - dir: rtl, ltr;

Quotation Tag
<q> This is Quotation Tag. </q>

Pre-Formatted Text Tag

<pre>
This is bold Tag
This is Emphasize Tag.
</pre>

CYGEN TECHNOLOGY 12
HTML Images Tags

<figure>
<img src=“images/logo.jpg” width=“200” height=“100” alt=“This is Logo.”>

<figcaption> Figure 1.0 </figcaption>

</figure>

Attribute :

src=“url”,

alt=“Text”,

width=“px, percentage”,

height=“px, percentage”

CYGEN TECHNOLOGY 13
Type of Link

• link - <link href=“url” rel=“stylesheet”>


• a - <a href=“url”> Text </a>
• Mail - <a href=mailto:addr> text </a>

Usage

• Navigation
• Making Link (create a link, anchor link)

Navigation
<nav>
<a href=“url”> Home </a>
<a href=“url”> Download </a>
</nav>

Create a Link
<a href=“url”> <img src=“url”></a> - Image link
<a href=“#id”> Go to Top </a> - Anchor link

Attribute:
target: _blank, _self, _parent, _top;

CYGEN TECHNOLOGY 14
• Order List
• Un-Order list
• Description list

Order List
<ol>
<li> List 1 </li>
</ol>

Attribute :
start=“number”;
reversed=“reversed”
type=“alphabet or number or roman”;

Un-Order List
<ul>
<li> List 1 </li>
</ul>
Attribute :
type=“circle, square, disc”;

Description List
<dl>
<dt> Title </dt>
<dd> Description </dd>
</dl>

CYGEN TECHNOLOGY 15
HTML Inline Elements
• Format tags, img, a, span
<span> This is Span tag. </span>

HTML block Elements


• Paragraph tag, list tags, div
<div> This is Div tag. </div>

HTML Grouping Element

div, span, main, heading, nav, section,


article, aside, footer

Attribute :
id=“name”
class=“name”

CYGEN TECHNOLOGY 16
HTML File Paths
File paths are used when linking to external files links:
1. Web Pages
2. Images
3. Style sheets
4. JavaScript

• Absolute Paths
• Relative Paths

Absolute Paths
Eg:
<img src=“images/logo.jpg” alt=“logo”>

Relative Paths
Eg:
<img src=“./images/logo.jpg” alt=“logo”>

CYGEN TECHNOLOGY 17
• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption

Attribute:
border, colspan, rowspan, valign (not support HTML5)

<thead>, <tbody>, <tfoot>

Eg:
<table>
<caption> Table </caption>
<thead>
<tr>
<td> This is Heading </td>
</tr>
</thead>
</table>

CYGEN TECHNOLOGY 18
HTML Form
The HTML <form> elements defines a form that is used to collect user input:

Attribute:
action, method (get, post), enctype (multipart/form-data)

Get Method
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (2048 characters)
• Never use Get to send sensitive data! (will be visible in the URL*)
• Useful for form submissions where a user wants to bookmark the result
• Get is better for non-secure data, like query strings in Google

Post Method
• The POST method does not display the submitted form data in the URL
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked.

CYGEN TECHNOLOGY 19
Grouping Form Data
• The <fieldset> element is used to group related data in a form.

• The <legend> element defines a caption for the <fieldset> element.

Eg:

<form action="/action_page.php">
<fieldset>
<legend> Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

CYGEN TECHNOLOGY 20
HTML Input Types
The most important form element is the <input> element. The <input> element can be
displayed in several ways, depending on the type attribute.
Attribute:
type, name, value:

HTML Select Element


The <select> element defines a drop-down list. The <option> elements defines an option that
can be selected.
Attribute:
name, value, selected, size, multiple

Eg:
<select name=“city” size=“2” multiple>
<option value=“yangon”> Yangon </option>
<option value=“mandalay” selected> Mandalay </option>
<option value=“naypyitaw”> Nawpyitaw </option>
</select>

CYGEN TECHNOLOGY 21
The Textarea Element
The <textarea> element defines a multi-line input field (a text area):
Attribute:
name, row, cols:
Eg:
<textarea name =“meassage” row=“10” cols=“30”>
The cat was playing in the garden.
</textarea>

The button Element


The <button> defines a clickable button:
Attribute:
type (button)
Eg:
<button type=“button”> Click Me </button>

CYGEN TECHNOLOGY 22
HTML Input Type • <input type=“number” max=“” min=“”>

• <input type=“text”> • <input type=“range” max=“” min=“”>

• <input type=“password”> • <input type=“search”>

• <input type=“radio”> • <input type=“tel” pattern=“[0-9]{3}-[0-9]{2}-[0-9]{3}>

• <input type=“hidden”> • <input type=“time”>

• <input type=“image”> • <input type=“url”>

• <input type=“checkbox”> • <input type=“week”>

• <input type=“submit”>
• <input type=“reset”> Attribute:
type, name, id, value, placeholder, required,
Disabled, maxlength, max, min, readonly, checked,
HTML 5 Input Type
size, autocomplete (on, off), autofocus, height, width,
• <input type=“color”>
multiple, list, pattern ([A-Za-z]{3})
• <input type=“date” max=“” min=“”>
• <input type=“datetime-local”>
Eg:
• <input type=“email”>
<label for=“fname”> First Name </label>
• <input type=“file”>
<input type=“text” name=“firstname”> id=“fname”
• <input type=“month”> required placeholer=“First Name”>

CYGEN TECHNOLOGY 23
HTML Video
To show a video in HTML, use the <video> element.
Attribute:
controls, autoplay (on, off)
Eg:
<video width=“400” height=“300” autoplay>
<source src=“mov_bbb.ogg” type=“video/ogg>
</video>

HTML Video
To show audio in HTML, use the <audio> element.
Attribute:
controls, autoplay (on, off)
Eg:
<audio autoplay>
<source src=“mov_bbb.ogg” type=“video/ogg>
</audio>

CYGEN TECHNOLOGY 24
Thank you For Joining Us
Cygen Technology

CYGEN TECHNOLOGY 25

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy