Introduction to Web Technologies
Web technologies: Static HTML Page: Static Website: Dynamic HTML Page: Web application: Define Client? Define Web browser? URL(Uniform resource location): A unique reference of Web application or Web page
HTML
HTML – Introduction
HTML introduction: Note: Every HTML element is a program Steps to write First HTML Code: What are HTML IDEs? Advantage of IDE: Code intelligence – Giving ideas to programmer to develop the code more easily. For example, if we write start tag – IDE will write end tag automatically. Case-sensitivity: Html is purely case insensitive; …
HTML – Tags
HTML Tags: Paired Tags (Non empty tags): Contains data. It is a combination of start tag & end tag Syntax: <start> data </end>Example: <title> data </title> Unpaired Tags (Empty tags): It contains only start tag and we must end in the same tag Syntax: <start/>Example: <br/> <img src=” “/> <input type=”text” /> Note: HTML is …
HTML – Attributes
HTML attributes: For example: <start attribute=value> content </end> Note: Multiple attributes must be separated using space character. Attributes in Non-empty tag: <p style=’color : blue’> Paragraph </p> Attributes in Empty tag: <img src=”kid.jpg” width=”300” height=”300”/> The following diagram explains attributes more clearly:
HTML – Apply CSS to HTML
CSS Introduction: <!doctype html><html> <body> <p style=”color:red”> First Paragraph </p> <p style=”color:blue”> Second Paragraph </p> <p style=”font-size:50px”> Third Paragraph </p> </body></html> 2. Using <style> tag in head location: When we want to apply same styles to multiple HTML elements in Single page. <!doctype html><html> <head> <style> p{ color : red ; } h1{ color : …
HTML – Introduction to JavaScript
JavaScript Introduction: We can Write JavaScript code in places of HTML document Body Location: Execute Script when web page is loading. <!DOCTYPE html><html> <body> <script> alert(“Alert box while loading page”); </script> </body></html> Head Location: Execute Script on action (for example click on button). <!DOCTYPE html><html> <head> <script> function run() { alert(“Alert when we click on …
HTML – Headings and Paragraphs
Heading tags: <!doctype html><html> <head> <title> Heading tags </title> </head> <body> <h1> Heading1 </h1> <h2> Heading2 </h2> <h3> Heading3 </h3> <h4> Heading4 </h4> <h5> Heading5 </h5> <h6> Heading6 </h6> </body></html> Headings with CSS: <! DOCTYPE html><html> <head> <title> Heading with CSS </title> </head> <body> <h1 style=”color:red”> Heading1 </h1> <h2 style=”color:green”> Heading2 </h2> <h3 style=”color:blue”> Heading3 …
HTML – Scrolling Text
Marquee tag: The <marquee> is used to create scrollable objects on web page. Scrolling text: <html> <body> <marquee> Hello All </marquee> </body></html> Scrolling Heading: <html> <body> <marquee> <h1> Welcome </h1> </marquee> </body></html> Scrolling Bold Italic Underlined Paragraph: <html> <body> <marquee> <p><b><i><u> Welcome </u><i></b></p> </marquee> </body></html>
HTML – Formatting Tags
Formatting Tags: Formatting text for better look and feel. Some of the examples are <html> <body> <b> Bold Text </b> <br/> <u> Underlined Text </u> <br/> <i> Italic Text </i> <br/> </body></html> We can format paragraphs as follows: <html> <body> <p> <b> Bold Text </b> </p> <p> <u> Underlined Text </u> </p> <p> <i> Italic …
HTML – images
<img>: <! DOCTYPE html><html> <body> <img src=”logo.jpeg”/> </body></html> Attributes <img> tag: <!DOCTYPE html><html> <body> <img src=”logo.jpeg” height=”180″ width=”300″ alt=”AmeerpetIT Logo”> </body></html> Scrolling Image: <!doctype html><html> <body> <marquee> <img src=”logo.jpeg”/> </marquee> </body></html>