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
