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 – 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 – Introduction Read More »

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 – Tags Read More »

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 – Apply CSS to HTML Read More »

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 – Introduction to JavaScript Read More »

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 – Headings and Paragraphs Read More »

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 – Formatting Tags Read More »

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>

Scroll to Top