Page 7
Semester 3: Web Technologies
Web fundamentals and HTML - internet, web browsers, servers, URLs, MIME, HTTP, security, HTML basics
Web Technologies
Internet
The Internet is a global network of interconnected computers that communicate through standardized protocols. It enables the sharing of information and resources and serves as the backbone for various services.
Web Browsers
Web browsers are software applications used to access and view websites. They interpret HTML, CSS, and JavaScript and facilitate user interactions with web content by rendering it visually.
Web Servers
Web servers are systems that store, process, and deliver web pages to clients. They listen for requests from browsers, proceed to process those requests, and return the appropriate web resources.
URLs
Uniform Resource Locators (URLs) are addresses that specify the location of resources on the Internet. A URL typically consists of protocol, domain name, and path to the specific resource.
MIME
Multipurpose Internet Mail Extensions (MIME) is a standard that indicates the nature and format of a file. It allows web servers to specify the type of content being sent to clients, enabling proper handling by browsers.
HTTP
Hypertext Transfer Protocol (HTTP) is the foundational protocol used for transferring data on the web. It defines how messages are formatted and transmitted, and how web servers should respond to requests.
Security
Web security involves protecting websites and users from cyber threats. Securing web applications can include practices such as using HTTPS, implementing authentication and authorization protocols, and safeguarding against common vulnerabilities.
HTML Basics
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It structures content using elements such as headings, paragraphs, and links. Understanding the basic syntax of HTML is essential for web development.
XHTML and CSS - syntax, structure, stylesheets, font, list, color, box model, background, spans and divs
XHTML and CSS
Syntax
XHTML follows the rules of XML, requiring proper nesting of tags and closing of all elements. CSS syntax includes selectors, properties, and values, allowing designs to be applied to HTML elements.
Structure
XHTML documents consist of a doctype declaration, HTML element, head, and body. CSS can be structured in external stylesheets, internal styles, or inline styles.
Stylesheets
CSS stylesheets define how HTML elements are displayed. They can be linked externally or included in the document's head section.
Font
CSS provides various properties like font-family, font-size, font-weight, and font-style to control how text appears.
List
CSS can style ordered and unordered lists using properties like list-style-type and margin. This allows customization of bullet points and numbering.
Color
CSS allows color specification using color names, hex codes, or RGB/RGBA values, providing full control over the color of text, backgrounds, and borders.
Box Model
The box model defines how elements are structured in terms of content, padding, border, and margin. Understanding this is crucial for layout design.
Background
CSS allows setting background colors, images, and gradients for elements using the background property, enabling rich visual designs.
Spans and Divs
Divs are block-level elements used for structure and layout, while spans are inline elements used for styling parts of text or small sections.
JavaScript basics - syntax, primitives, expressions, screen output, control statements, arrays, functions, errors
JavaScript basics
Syntax
JavaScript uses a combination of keywords, identifiers, operators, and punctuation. Statements end with a semicolon. Curly braces define code blocks. Indentation is not syntactical but improves readability.
Primitives
JavaScript has several basic data types known as primitives: string, number, boolean, null, undefined, and symbol. Each has its own usage and characteristics.
Expressions
An expression is any valid unit of code that resolves to a value. Expressions can be arithmetic, logical, or relational. They can be combined to form complex expressions.
Screen Output
JavaScript can output values to the screen using console.log() for debugging or document.write() for direct HTML output.
Control Statements
Control statements in JavaScript include if statements, switch statements, for loops, while loops, and do-while loops, enabling conditional execution and iteration.
Arrays
Arrays are used to store multiple values in a single variable. They are created using square brackets. Common methods include push(), pop(), shift(), unshift(), and slice().
Functions
Functions are reusable blocks of code defined using the function keyword. They can take parameters and return values. Functions can be anonymous or named.
Errors
Errors in JavaScript can be syntax errors, runtime errors, or logical errors. Proper error handling can be achieved using try-catch blocks.
JavaScript and XHTML - DOM model, elements access, events
JavaScript and XHTML - DOM model, elements access, events
DOM Model
The Document Object Model (DOM) is a programming interface for web documents. It provides a structured representation of the document as a tree of objects, allowing programming languages like JavaScript to access and manipulate the content, structure, and style of the webpage. The DOM is platform- and language-independent, enabling interaction with the HTML or XHTML document regardless of the programming language used.
Elements Access
Elements in the DOM can be accessed using various methods provided by the JavaScript language. Common methods include getElementById, getElementsByClassName, and querySelector. These methods allow developers to retrieve elements based on their unique ID, class, or CSS selectors, respectively. Once an element is accessed, properties like innerHTML, style, and attributes can be modified.
Events
Events are actions that occur in the web page, such as clicks, key presses, mouse movements, etc. JavaScript enables developers to add event listeners to HTML elements, which can execute specific functions when the events are triggered. Common event types include click, mouseover, keydown, and focus, among others. Event handling is crucial for creating interactive web applications.
Dynamic documents - positioning, moving, visibility, colors, dragging and dropping
Dynamic documents
Positioning
Positioning in dynamic documents refers to the way elements are arranged and layered over each other. CSS properties like position, top, right, bottom, and left help in controlling element placement. Different positioning types include static, relative, absolute, and fixed.
Moving Elements
Moving elements involves changing the position of the HTML elements dynamically, often using JavaScript or CSS transitions. This can also include animations that make elements slide in or out of the viewport.
Visibility Control
Visibility control allows developers to show or hide elements based on user interactions or conditions using CSS properties such as display, visibility, and opacity. This helps in creating more interactive and user-friendly interfaces.
Colors and Styles
Dynamic documents often require dynamic styling, which can be achieved via CSS class changes or inline styles using JavaScript. This allows elements to change colors, fonts, and other styles based on user actions or data.
Dragging and Dropping
Dragging and dropping elements is a common feature in dynamic documents, enabling users to rearrange content. This can be implemented using the HTML drag-and-drop API and JavaScript event handlers to manage the drag lifecycle.
XML basics - syntax, structure, DTD, namespaces, schemas, CSS and XSLT presentation, web services
XML basics
Syntax
XML syntax consists of elements, attributes, and declarations. Elements are defined by tags and must be properly nested. Attributes provide additional information about elements and are specified within the opening tag.
Structure
The structure of an XML document is hierarchical. It starts with a single root element that contains nested elements. Elements can contain text and attributes.
DTD
Document Type Definition (DTD) defines the legal structure of an XML document. It specifies the elements, attributes, and their relationships, ensuring that the document adheres to a consistent format.
Namespaces
XML namespaces are used to avoid element name conflicts by qualifying names with unique identifiers. They allow for the use of similar element names in different contexts.
Schemas
XML Schema is a more powerful alternative to DTD for defining the structure of an XML document. It uses XML syntax to define elements, attributes, and data types, providing validation capabilities.
CSS Presentation
Cascading Style Sheets (CSS) can be used to style XML documents. CSS selectors can target XML elements and apply styles such as colors, fonts, and layouts.
XSLT Presentation
XSL Transformations (XSLT) is a language for transforming XML documents into other formats like HTML or plain text. It allows for advanced manipulation and presentation of XML data.
Web Services
XML plays a crucial role in web services, allowing different systems to communicate over the internet. Web services often use XML as a format for requesting and returning data, facilitating interoperability.
PHP, AngularJS, and jQuery - syntax, control statements, arrays, functions, form handling, cookies, session tracking
Web Technologies
PHP
AngularJS
jQuery
