Scripting Languages

1. Web Development
2024, Spring Semester

Kutaisi International University

Outlines
• HTML
• CSS
• JavaScript
• React
HTML file

The HTML code file is an essential component of any website as it is

responsible for the content on the webpage. In analogy, if a website
were a house, the HTML would be the bricks used to build the
structure. It is the raw material that makes up the website's content,
such as text, images, buttons, or links.
CSS file

The CSS file serves as a crucial component responsible for styling a

website, determining its look and feel, much like the color of walls
or the shape of a door affects the overall appearance of a house.
These files target all the content created using HTML and apply
styling to those elements. Using CSS, we can make a button turn
red, give it rounded corners, and apply a specific font to the text.
JavaScript file

The final component, JavaScript code, adds functionality to a

website. In analogy, it's like adding light bulbs or a cooker to a
house to turn it into a home. JavaScript transforms a static website
that displays only images or text into a dynamic website with which
users can interact.
 Frontend vs Backend Development
• Frontend • Backend
The Frontend refers to the visible On the other hand, the Backend is
part of a website or application responsible for the server-side logic and
that users directly interact with. It
encompasses the user interface handles data and requests from the
and experience, allowing users to Frontend. Operating behind the scenes,
intuitively view and interact with
content. it powers the entire application.
Key responsibilities of the Frontend Key responsibilities of the Backend
include: include:
• Displaying content in an •Managing servers that host the
appealing and user-friendly
manner. application and handle incoming
• Handling user input, such as form requests from users.
submissions and clicks on •Running data storage and retrieval
interactive elements. through databases.
• Providing an intuitive interface •Executing application logic to process
that allows users to navigate and
interact effortlessly. user requests and produce responses.
 HTML Tags and Attributes

Titles and Text

<h1> tag - for the main title and <h2>, <h3>, and so on - for subheadings

<p> tag - for the paragraph

Lists
<ol> tag will arrange your list of items with ascending numbers, ensuring a structured and coherent sequence.
<ul> tag – the same with the bullets.

Buttons and 🔗 Hyperlinks:

<button> tag and the <a> tag
 Tags
HTML
HTML (Hyper Text Markup Language) is used for creating web documents. It defines rules for structuring text, adding images, and creating tables,
forms, and lists. An HTML document is a text file with a .html extension that web browsers interpret to display a web page.

Tag
A tag is the fundamental building block of HTML. It represents an element or item within a web page, such as a heading, list, text paragraph, or image.
Tags are differentiated from the regular text by using angle brackets. The tag name and any attributes are placed inside the angle brackets (<>).
For example, in the code snippet below, we have HTML elements written using opening and closing tags:
<section>Section element</section>
<p>Paragraph element</p>
<button>Button element</button>
The opening tag (<tag_name>) signifies the start of an element, while the closing tag ( </tag_name>) indicates its conclusion. We place the desired text between
the opening and closing tags to include content within the element. You can run the code using the 'Run Code' button to see how the elements are rendered.
The 'Reset' button clears the code input.

Comments
In HTML, comments can provide explanations or notes within the source code. They are written using the <!-- ... --> syntax. The browser will ignore anything
written within these comment tags and will not be displayed on the webpage. With these adjustments, the text provides a concise and informative
explanation of HTML concepts, an example code snippet, and a brief overview of comments.

<!-- Comment. It will not be displayed on the page -->

<a>Link element. It will be displayed on the page</a>

<!--
Comments can be multi-line.
They do not influence the page content.
-->
 Attributes
Attributes are integral to HTML elements as they provide supplementary information or instructions about an element.
By defining the element's behavior, appearance, or functionality, attributes enhance its overall functionality. Attributes
are specified within the opening tag of an element and consist of a name and a value.
Basic Syntax
Key Points
•Attributes can be optional or required: Depending on the element, specific attributes may be required to function correctly, while others are optional and provide
additional customization options.
•Attributes are enclosed in quotes: Attribute values are enclosed in either double quotes ("...") or single quotes ('...'). This helps to distinguish them from the element’s
name and aids in readability.
•Each tag has its own set of attributes: Different HTML elements support different attributes. Understanding the specific attributes applicable to each element is
essential to utilize them effectively.
•Multiple attributes can be used: It is possible to include multiple attributes in a single element by separating them with a space. This allows for more ext ensive
customization and control over the element's behavior.

<input type="text" placeholder="name">

<img alt="Forest" src="https://amazonaws.com/code-1/forest+example+img.png" />
<a target="_blank" href="https://www.google.com/">Google</a>
<button type="reset">Reset the information</button>
 Paired and Single Tags
Paired Tags
Paired tags consist of opening and closing tags. They can wrap around the
content and group items to change some properties or collect elements by
meaning.
Syntax:

Single tags
Single tags consist of only an opening tag and no closing tag. They are
used when the tag does not require content or when all content and
behavior are specified using attributes.
Syntax:
Tag nesting
When nesting tags, following the hierarchy order is essential, similar
to nesting dolls. Each nested tag should be enclosed appropriately
within its parent tag while still following the rules of HTML syntax.
Here’s the examples of nested tags:

<p>
I accept <a href="https://terms.com">the Terms and
Conditions</a> of
<em>website</em>
</p>

•<p> - defines a paragraph (parent element);

•<a> - defines a hyperlink (child element);

•<em> - marks text that has stress emphasis (child element);

 Text Markup
Paragraph
The <p> tag is used to define a paragraph of text. By default, each paragraph starts on a new line. The <p> tag is commonly used for displaying text content, such as articles,
blogs, and other forms of textual information on a web page.
Headings
Headings <h1> ... <h6> are used to define the hierarchy and structure of a web page. Headings provide context for the content on the page, help users navigate the page,
and are also used by search engines to understand the page's content. The <h1> to <h6> tags are used to create headings of different sizes and levels of importance, with
<h1> being the most important and <h6> being the least important.
Lists
Unordered List (ul)
<ul> creates a list with bullet points or other markers for each item without any specific order or ranking. Each item is enclosedin a <li> (list item) tag, which creates a
separate bullet point for each item.
Ordered List (<ol>)
<ol>, on the other hand, is used to create a list with a specific order or ranking. The list items are numbered sequentially using the <li> tag. You can also specify a start
value for the numbering using the start attribute in the <ol> tag.
List nesting
Both <ul> and <ol> can be nested inside each other to create sub-lists. For example, you can create a numbered list ( <ol>) with nested bullet point lists (<ul>) for each item.
<ol start="7">
<li>ordered list item 1</li>
<li>
ordered list item 2
<ul>
<li>unordered list item 1</li>
<li>unordered list item 2</li>
<li>unordered list item 3</li>
</ul>
</li>
<li>ordered list item 3</li>
</ol>
 Special Purpose Text Markup
Link
The <a> tag is used to create hyperlinks that enable users to navigate between different web pages. When a user clicks on a link, the browser sends a request to the
server for the page associated with the link and displays the response on the screen. The href attribute helps specify the URL of the destination page.
<a href="https://www.google.com/">Google</a>
Link Attributes:
Target By default, the link opens in the same browser tab. The target attribute allows us to modify this behavior. To open a link in a new tab, use target="_blank".
<a href="https://www.google.com/" target="_blank">Google</a>
download
The download attribute can be used with the HTML <a> tag to specify that the target resource should be downloaded instead of displayed in the browser. When the
download attribute is used, the browser prompts the user to save the file with the specified filename. For example, if we need to crea te an element with the following
functionality: when the user clicks on the link, the browser will download the myfile.pdf file from https://example.com/ and prompt the user to save it with the filename
myfile.pdf.

<a href="https://example.com/myfile.pdf" download="myfile.pdf">

Download my PDF file
</a>
href The href attribute is used not only to navigate to other pages but also to create links to email addresses, telephone numbers, and spe cific sections.
<!-- telephone number -->
<a href="tel:+11236574926">+1-(123)-657-4926</a>

<!-- email address -->

<a href="mailto:[email protected]">[email protected]</a>
 Button
The <button> tag in HTML is used to create a clickable button that can trigger an action, such as submitting a form, executing a JavaScript function like opening and closing
a pop-up window, or toggling a mobile menu. By default, the <button> has the type attribute, and its value is submit. However, we often need to specify type="button".
<button type="button">Open mobile menu</button>
Structure Document type declaration
<!DOCTYPE > is not considered a tag but a mandatory declaration specifying the document type and version.
This declaration is necessary for the browser to correctly interpret and render the HTML document. Based on
the doctype browser can display the page correctly. The document-type declaration must be the first thing the
browser meets when working with an HTML document.
Top-level Elements
<html> tag
<head> tag
<body> tag
 Document Head
Page title
The text inside the <title> tag is displayed in the browser tab. The title should be a concise page description and should be at most 60 characters in length.

Meta data
The <meta> tag contains information for browsers and search engines: document encoding, data communication, and much more. The meta tags can have many
attributes as they all convey different information. The most important is page encoding. It helps a browser display the text correctly. In case of not passing encoding,
the browser may show mojibake instead of the characters.

Meta tag attributes meaning

<!DOCTYPE html>
<html lang="en">
•name - name of a property can be any word or phrase, web browsers generally expect a value that they can
<head> recognize and use to perform an action. An example would be <meta name="author" content="name"> to state the
<!-- Meta data --> author of the page.
•content - specifies the property's value. An example would be <meta name="language" content="english"> to
<meta charset="utf-8" />
specifies the page text language.
<title>Web Development</title> •http-equiv - stands for HTTP equivalent, and it’s used to simulate HTTP response headers. This is rare to see.
</head> An example would be <meta http-equiv="refresh" content="30"> to say the browser to refresh the page every 30
minutes.
<body>
<!-- Content -->
</body>
</html>
 Basic meta tags for SEO improving
(Search Engine Optimization)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta data -->
<meta charset="utf-8" />
<meta name="description" content="Deep dive into web development
process." />
<meta name="author" content="Oleh Subotin" />
<meta name="language" content="english" />
<meta name="robots" content="index" />
<meta name="googlebot" content="translate" />
<meta name="rating" content="safe for kids" />
<meta name="copyright" content="Copyright 2023" />
<title>Web Development</title>
</head>
<body>
<!-- Content --> •<meta name="description"/> - specifies a brief description of the web page.
</body> •<meta name="author" /> - specifies the web page author
</html> •<meta name="language"/> - specifies the web page language
•<meta name="robots"/> - tells search engines how to crawl or index the web page
•<meta name="googlebot" content="notranslate"/> - tells Google you don't let an automatic translation for the web page
•<meta name="rating" content="safe for kids"/> - specifies the web page audience
•<meta name="copyright" content="Copyright 2023"/> - specifies the web page Copyright
 Images
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/mountains.avif"
alt="Mountains in snow and clean sky"
width="500"
height="333"
/>
•src - required attribute. Its value is the path to the image location. The path can be absolute and relative.
•alt - required attribute. Provides alternative text that can be displayed when the image cannot be rendered.
•width and height - specifies image size in pixel. Without these attributes an image will be rendered in its original size.
alt attribute
We make the image description informative and meaningful. It helps to describe the image for people who are visually
impaired or unable to see it. This way, the browser will read the alt attribute, and a user could understand why we have
this image.
 Special Purpose Images
• Clickable images
<a href="https://example.com">
<img src="image.jpg" alt="Image Description" width="360"/>
</a>
• Image Caption
<figure>
<figcaption>Sweet Home</figcaption>
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-
html/media+and+tables/house.png"
alt="House in the middle of the forest in the evening with the lights on"
width="240"
height="240"
•figure - element contains both the figcaption and img elements;
/> •figcaption - specifies the caption text, visible for users;
•img - specifies the image to display;
</figure>

•Use appropriate file formats. Generally, we use JPEGs for photographs, PNGs for graphics, and images
with transparency. Avoid larger BMP or TIFF files.
 Audio Embedding
<audio controls>
<source
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/html+audio+example"
type="audio/mp3"
/>
Fallback message (can be any text)
</audio>
•<audio> element contains a <source> element, which specifies the URL and file type of the audio file. Commonly supported formats are MP3 and OGG.
•controls attribute displays standard playback controls such as play, pause, and volume.
•If the user's browser doesn't support the audio element, a fallback message will be displayed.

•autoplay - starts playing the audio file as soon as the page loads.
•loop - causes the audio file to loop continuously.
•muted - mutes the audio by default.
•volume - specifies the default volume level for the audio file, ranging from 0.0 (silent) to 1.0 (full volume).
<audio controls autoplay loop muted volume="0.5">
<source src="audio.mp3" type="audio/mp3">
Sorry, your browser does not support audio.
</audio>
 Video Embedding
<video controls width="300">
<source
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/html+video+example"
type="video/mp4"
/>
Fallback message (any text)
</video>
•<video> element contains a <source> element, which specifies the URL and file type of the video file. Commonly supported formats are WebM, MP4, and OGG.
•controls attribute displays standard playback controls.
•If the user's browser doesn't support the video element, a fallback message will be displayed.

•autoplay - starts playing the video file as soon as the page loads.
•loop - causes the video file to loop continuously.
•muted - mutes the audio by default.
•volume - specifies tthe default volume level for the audio file, ranging from 0.0 (silent) to 1.0 (full volume).
•poster - specifies the URL of an image to display as the video thumbnail before the video is played.
•width and height - specifies the width and height of the video player in pixels.

<video controls autoplay loop muted volume="0.5"

width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
 Tables
To create tables in HTML, we use the following main elements:
<table>
•<table> - defines a table on a web page. <caption>New menu</caption>
•<tr> - defines a row within the table. <thead>
•<th> - defines a header cell within a row. Header cells are typically bold and centered. <tr>
•<td> - defines a standard data cell within a row. <th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
 Forms
Form Creation Basis
The HTML <form> element is a fundamental building block for creating interactive forms on a web page. It serves as a container for all the fo rm elements.
Let's explore an example of a basic form:
<form name="login_form" autocomplete="off" novalidate method="post"
onsubmit="return false">
<label>
Email
<input type="email" name="email" />
</label>

<label>
Password
<input type="password" name="password" />
</label>

<button type="submit">Submit</button>
</form>
•name provides a distinct identifier for the form on a webpage. Both the server and client use this identifier to process the form data.
The form name may include numbers, underscores, dashes, and English alphabet characters, but it must not contain any spaces.
•autocomplete determines whether web browsers can fill out form fields automatically. It can be set to "on" or "off" and applied to individual form elements.
•novalidate specifies that browsers should not perform form field validation. This can be useful when you want to handle validation manually using JavaScript.
•method specifies the HTTP method used to send the form data to the server. The two most common methods are GET and POST. This topic will be covered
in-depth in the JavaScript course.
•<input> element allows users to input different data types, such as text, numbers, dates, etc. In this example, we use the type="email" for the email field and type="password"
for the password field.
•<label> element helps to organize and structure the form. It also provides a label for each input field, indicating what the input is responsible for.
•<button> element with type="submit" is used to submit the form data to the server when clicked. By default, when the submit button is pressed, the data from the inputs is
sent to the server, and the web page reloads. However, this behavior can be overridden using JavaScript.

Label for Input Element

The <label> element is used to associate a label with an input field on a form. This association helps users understand the information b eing requested in the form field.
When a user clicks on the label, it automatically focuses on the corresponding input field.

Wrapping
By nesting a form element, such as an <input/> field, within a <label> element, the browser automatically establishes a link between the label and the input field.
For example:
<form onsubmit="return false"> Using the id attribute
<label> When a form element is not nested within a <label> element, we manually link them by using the id attribute
of the input element and the for attribute of the label. The value of the for attribute and id attribute must be
Name
the same. For example:
<input type="text" name="name" />
</label> <form onsubmit="return false">
<label for="name"> Name </label>
<button type="submit">Submit</button> <input type="text" name="name" id="name" />
</form>
<button type="submit">Submit</button>
</form>
 Input Attributes
The HTML <input> element allows us to create various form controls for collecting user input. We can customize the behavior and appearance of these controls using
different attributes. Let's explore some commonly used attributes:
value
The value attribute is used to set the initial value of the <input> element. The specific value it takes depends on the input type:
•For buttons (type="button", type="reset", type="submit"), it defines the text displayed on the button.
•For text (type="text") and password (type="password") fields, it defines the default value of the input field.
•For checkboxes (type="checkbox") and radio buttons (type="radio"), it defines the value associated with the input.
<input type="button" value="Click Me" />
<input type="text" value="Default Text" />
<input type="checkbox" value="newsletter" />
autofocus
The autofocus attribute specifies that the input field should automatically have focus when the web page is loaded. When the page loads, the input field will be selected
automatically, allowing the user to start typing without clicking on the input field first.
<label for="question">Your question</label>
<input type="text" id="question" autofocus>
<label for="age">Your age</label>
<input type="number" id="age">
required
The required attribute is used to make an input field mandatory. It specifies that the input field must be filled out before the user can submit the form. If the user tries to
submit the form without filling out the required input field, they will receive a validation error message indicating that the field is required.
<form onsubmit="return false">
<label for="email">Email</label>
<input type="text" id="email" required />
<label for="password">Password</label>
<input type="password" id="password" required />
<button type="submit">Register</button>
</form>
 placeholder
The placeholder attribute provides a hint or example of the expected input value to the user. A short text string is displayed inside the input field before the user enters
any value. This is useful for fields requiring specific formatting, such as phone or credit card numbers.

<form onsubmit="return false">

<label for="phone">Phone Number</label>
<input type="tel" id="phone" placeholder="+1-(XXX)XXX-XXX" />
<label for="card">Card details</label>
<input type="text" id="card" placeholder="XXXX-XXXX-XXXX-XXXX" />
<button type="submit">Make Payment</button>
</form>

Input Types
email and password
•type="email": Used for email input fields that require a valid email address. The browser automatically validates the email address, prom pting the user to
correct invalid entries.
•type="password": Used for password fields where the entered text is masked for security. We can also specify minLength and maxLength attributes to set
password length requirements.
<form onsubmit="return false"> number
<!-- mail --> type="number": Used for numerical input. We can define a specific range with the min and max attributes and set
<label for="mail">Email</label> a specific step value with the step attribute.
<input type="email" id="mail" />
<form onsubmit="return false">
<!-- password -->
<label for="year">Year of birth</label>
<label for="password">Password</label> <input type="number" min="1900" max="2023" id="year" />
<input type="password" id="password" />
<button type="submit">Submit</button> <label for="height">Height with 0.1 step</label>
</form> <input type="number" id="height" step="0.1" min="0.1" max="10.0" />

<button type="submit">Submit</button>
</form>
 telephone
type="tel": Intended for inputting telephone numbers, but it does not perform any validation on the input. It is up to the developer to validate the input and ensure it's a
valid phone number.
<form onsubmit="return false">
<label for="phone">Phone number:</label>
<input type="tel" id="phone" />

<button type="submit">Submit</button>
</form>

checkbox
type="checkbox": Allows the user to select one or more options from predefined choices. The checked attribute makes a checkbox checked by default.
<form onsubmit="return false">
<p>What is your favorite season?</p>
<label>
Winter
<input type="checkbox" name="winter" value="winter" checked />
</label>
<label>
Spring
<input type="checkbox" name="spring" value="spring" />
</label>
<label>
Summer
<input type="checkbox" name="summer" value="summer" />
</label>
<label>
Fall
<input type="checkbox" name="fall" value="fall" />
</label>
</form>
 radio
type="radio": Creates a set of options where only one option can be selected. A radio button represents each option, and choosing one aut omatically deselects the others.
Each radio button should have a unique value attribute to identify it.
<form onsubmit="return false">
<p>What is your favorite food?</p>
<label>
Pasta
<input type="radio" name="dish" value="pasta" checked />
</label>
<label>
Pizza
<input type="radio" name="dish" value="pizza" />
</label>
<label>
Burger
<input type="radio" name="dish" value="burger" />
</label>
<label>
Steak
<input type="radio" name="dish" value="steak" />
</label>
</form>

range
type="range": Creates a slider control that allows users to select a value within a specific range. We can apply min, max, step, and value attributes to define its behavior.
<form onsubmit="return false">
<label for="day">Day of the week</label>
<input id="day" type="range" value="5" min="1" max="7" step="1" />
</form>
<p>Selected value: <span class="selected-value">5</span></p>
<script src="index.js"></script>
 date and time Select Element
•type="date": Allows users to select a date from a calendar popup. The <select> element is used to create a dropdown list of options for the user to choose from.
•type="time": Allows users to input a time in a 24-hour format. It is typically used in forms where the user needs to choose from a predefined set of options.
•type="datetime-local": Combines time and date inputs. It is always used in conjunction with <option> elements. The <option> elements define the
<form onsubmit="return false"> individual items in the dropdown list.
<!-- Date -->
<label for="date">Date</label> <form onsubmit="return false">
<input type="date" min="1970-01-01" max="2070-01-01" id="date" /> <select>
<option value="tomato">tomato</option>
<!-- Time --> <option value="cucumber">cucumber</option>
<label for="time">Time</label> <option value="lettuce">lettuce</option>
<input type="time" id="time" /> </select>
<button type="submit">Submit</button>
<!-- Date and Time --> </form>
<label for="full-time">Date and Time</label>
<input type="datetime-local" min="1900-01-01T00:00" max="2000-01-01T00:00" id="full-
time" />
Datalist Element
</form> The <datalist> element in HTML is used to create a pre-defined list of options for an <input> element.
It allows the user to select an option from a list of pre-defined options, while also giving them the
Textarea Element ability to enter their own value if they choose to. The list of predefined values is hidden up to the
<form onsubmit="return false"> moment a user starts to type in the associated text field. We combine <datalist> with id attribute
<label for="name">Name</label>
and <input> with list attribute.
<input type="text" id="name" />
<form onsubmit="return false">
<label for="feedback">Feedback</label> <label for="country">My country is</label>
<input type="text" name="country" id="country" list="countries" />
<textarea name="feedback" id="feedback" rows="3" placeholder="Leave your
<datalist id="countries">
opinion"></textarea>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<button type="submit">Submit</button> <option value="USA">USA</option>
</form> <option value="UK">UK</option>
<option value="New Zealand">New Zealand</option>
</datalist>
<button type="submit">Submit</button>
</form>
 Group Form Elements
Fieldset and legend elements
To group several related form elements together, we use the <fieldset> element. It provides a container for these elements, and we can add a group title using the nested
<legend> element. It is important to group related radio buttons and checkboxes, and other field types can also be grouped as necessary. This helps improve the
organization and clarity of the form for the user.
<link rel="stylesheet" href="index.css" />
<form onsubmit="return false">
<fieldset>
<legend>Contact details</legend>
<label>
Name
<input type="text" name="username" />
</label>
<label>
Email
<input type="email" name="email" />
</label>
<label>
Phone Number
<input type="tel" name="phone" />
</label>
</fieldset>

<fieldset>
<legend>Choose the products</legend>
<label>
<input type="checkbox" name="product" value="vegetable" />
vegetable
</label>
<label>
<input type="checkbox" name="product" value="fruit" />
fruit
</label>
<label>
<input type="checkbox" name="product" value="dairy" />
dairy
</label>
</fieldset>

<button type="submit">Order</button>
</form>