HTML Explained
HTML was developed from the prototype written by Tim Berners-Lee in 1992.
The World Wide Web began in Geneva, Switzerland. CERN is a meeting place for physicists from all over the world.
Enabling researchers from remote sites in the world to organize and pool together information.
Making available a large number of research documents as files that could be downloaded to link the text in the files themselves.
Cross-references from one research paper to another.
Tim's prototype Web browser on the NeXT computer came out in 1990.
The domain name system has made it much easier to address a machine on the Internet.
In the late 1980s, Bill Atkinson(Apple) application called Hypercard. Hypercard `filing cards' contained textual and graphical information.
Domain name letters separated by dots, `www.bo.com'
Names are easy-to-use unlike IP address numbers.
Distributed Name Service (DNS) maps domain names onto IP addresses, DNS was a breakthrough in making the Internet accessible.
HTTP, which stands for Hypertext Transfer Protocol, is the foundation of data communication for the World Wide Web. Whenever you visit a website, your browser uses this protocol to "talk" to a server and fetch the page content.
Think of it as the language of the web. It defines the rules for how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands.
HTTP - for retrieving other documents' text via hypertext links.
The text format for HTTP was named HTML, for HyperText Mark-up Language.
HTML was based on SGML (Standard Generalized Mark-up Language), an agreed upon method for marking up text into structural units.
SGML implemented on any machine.
Language was independent of the formatter (the browser or other viewing software) which displayed the text.
Pairs of tags <TITLE> and </TITLE> are taken directly from SGML.
HTML included P (paragraph); H1 through H6 (heading level 1 through heading level 6); OL (ordered lists); UL (unordered lists); LI (list items) and various others.
HREF attribute was Tim's invention and www.name.name' format for addressing machines on the Web.
Use of the anchor element A for creating hypertext links, was what made Tim's invention so useful.
Joseph Hardin and Dave Thompson, connect to the computer at CERN and download copies of two free Web browsers.
Decided to develop a browser of their own to be called Mosaic.
Marc Andreessen proposed the idea for the IMG tag by the Mosaic team.
Marc Andreessen formed Netscape Communications Corp. In November, 1994. What they planned to do was create and market their very own browser.
Version 1.0 of Microsoft Corp.'s Internet Explorer browser was announced. This browser was eventually to compete with Netscape's browser.
CSS started in 1994. Håkon Wium Lie works at CERN. is starting to be used as a platform for electronic publishing.
Way to style documents.
The separation of document structure from the document's layout.
Determine the style with a simple style sheet. How to change fonts and colors of elements.
Håkon published the first draft of the Cascading HTML Style Sheets proposal.
Design goals in CSS and HTML were soon removed from the title of the specification.
CSS took into account that on the Web, the style of a document couldn't be designed by the author or the reader, cascaded, in some way; the capabilities of the display device and the browser.
As planned, the initial CSS proposal was presented at the Web conference in Chicago in November 1994.
The concept of a balance between author and user preferences was novel.
At the end of 1995, W3C set up the HTML Editorial Review Board (HTML ERB) to ratify future HTML specifications.
CSS specification was taken up as a work item with the goal of making it into a W3C Recommendation. Among the members of the HTML ERB was Lou Montulli of Netscape. After Microsoft signaled that it was adding CSS support in its browser, it was also important to get Netscape on board.
The first commercial browser to support CSS was Microsoft's Internet Explorer 3, which was released in August 1996.
IE3 reliably supports most of the color, background, font, and text properties.
The next browser to support CSS was Netscape Navigator, version 4.0.
Netscape implemented CSS internally by translating CSS rules into snippets of JavaScript, which were then run along with other scripts.
JavaScript was invented by Brendan Eich in 1995.
It was developed for Netscape 2, and became the ECMA-262 standard in 1997.
After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop JavaScript for the Firefox browser. Mozilla's latest version was 1.8.5. (Identical to ES5).
Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1).
What is HTML?
Hypertext Markup Language (HTML) is the language for describing the structure of Web pages. HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
An HTML document is a text document that you can produce using any text editor.
HTML documents contain elements surrounded by tags—text that starts with a < symbol and ends with a > symbol.
The HTML element indicated by the starting tag <html> and
ending with the closing tag: </html>
The <head> element is a container for metadata (data about data)
and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document.
Metadata is not displayed and typically defines:
Document title
Character set
Styles
Scripts
Other meta information.
In HTML, metadata provides information about the webpage rather than the content on the webpage. It helps browsers, search engines, and other web services understand how to handle and display the page. Metadata is usually placed inside the <head> section of an HTML document.
Page information for browsers
<meta charset="UTF-8"> tells the browser which character encoding to use.
Search engine optimization (SEO)
<meta name="description" content="A tutorial on HTML metadata.">
Control how pages behave on different devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Provide author and copyright information
<meta name="author" content="John Smith">
Title will display on the web browser giving users clarity on what the page is about.
Most of the content delivered will be delivered within the body tags
<!DOCTYPE html> is used to inform that the document is an HTML document.
Every HTML document should begin <!DOCTYPE html>.
An example of a tag is <img src="home.gif"/>.
Document Structure
Every HTML file needs these "skeleton" tags to be recognized as a webpage.
<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html>: The container for everything on the page.
<head>: Contains "behind-the-scenes" info like the page title and links to CSS.
<body>: Contains all the visible content (text, images, videos).
Text Formatting
These tags help organize your writing and make it readable.
<h1> to <h6>: Headings, where <h1> is the most important and <h6> is the smallest.
<p>: Defines a paragraph.
<b> or <strong>: Makes text bold.
<i> or <em>: Makes text italicized.
<br>: A simple line break (this tag doesn't need a closing tag).
<hr>: Creates a horizontal line to separate sections.
Lists
There are two main types of lists: ordered (numbered) and unordered (bulleted).
Links and Media
This is how you make your page interactive and visual.
<a>: The Anchor tag used for links. You use the href attribute to tell it where to go:
<a href="https://google.com">Click here</a>
<img>: Displays an image. It uses the src (source) attribute:
<img src="photo.jpg" alt="Description of image">
Layout Containers
These tags don't change the look of the text much on their own, but they are used to group elements together for styling with CSS.
<div>: A "block-level" container used to group large sections of content.
HTML can include directives for formatting in
Cascading Style Sheets (CSS) - directives for formatting.
JavaScript - Programs for interaction.
Browsers, such as Firefox and Chrome, interpret the HTML
along with any CSS and JavaScript to produce what we
experience when we visit a website.
HTML holds the content of the website
CSS specifies the formatting
JavaScript programming used to make the website dynamic and interactive.
BASIC HTML STRUCTURE AND TAGS
HTML begins with a starting tag, followed by an ending tag.
Opening Tag Ending Tag
<TAGNAME> CONTENT </TAGNAME>
The ending tag includes a / symbol followed by the element type.
A standard HTML document looks like this:
=================================================
<!DOCTYPE html>
<html>
<head>
<title>First Web Page
</title>
</head>
<body>
<h1> My First Web Page </h1>
<P> HTML is simple to use </P>
</body>
</html>
=================================================
Let’s add this to our cloud storage bucket so we can access it via the web.
Activate your cloud shell
Create a directory for your work
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ mkdir web-examples
Access the cloud editor
Create a file called first.html in the web-examples directory and place code in the file.
Hit Open Terminal.
Change directory to web-examples
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ cd web-examples
john_iacovacci1@cloudshell:~/web-examples (cloud-project-examples)$
Move file to cloud storage bucket.
john_iacovacci1@cloudshell:~/web-examples (cloud-project-examples)$ gsutil cp first.html gs://cloud-storage-exam/
Copying file://first.html [Content-Type=text/html]...
/ [1 files][ 188.0 B/ 188.0 B]
Operation completed over 1 objects/188.0 B.
Some other simple tags
Text and list formatting tags
=========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Text Formatting Example</title>
</head>
<body>
<h1>Text Formatting Tags in HTML</h1>
<p><b>Bold Text:</b> This is <b>bold</b> using <b>.</p>
<p><strong>Strong Text:</strong> This is <strong>important</strong> using <strong>.</p>
<p><i>Italic Text:</i> This is <i>italic</i> using <i>.</p>
<p><em>Emphasized Text:</em> This is <em>emphasized</em> using <em>.</p>
<p><u>Underlined Text:</u> This is <u>underlined</u> using <u>.</p>
<p><mark>Marked Text:</mark> This is <mark>highlighted</mark> using <mark>.</p>
<p><small>Small Text:</small> This is <small>small text</small> using <small>.</p>
<p><del>Deleted Text:</del> This is <del>deleted</del> using <del>.</p>
<p><ins>Inserted Text:</ins> This is <ins>inserted</ins> using <ins>.</p>
<p><sub>Subscript:</sub> H<sub>2</sub>O (Water formula).</p>
<p><sup>Superscript:</sup> X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>.</p>
<p><code>Code Example:</code> Use <code><p></code> for a paragraph.</p>
<p><blockquote>Blockquote Example:</blockquote></p>
<p><q>Short Quotation Example</q> using <q>.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is an abbreviation.</p>
<h1>HTML Lists Example</h1>
<!-- Ordered List -->
<h2>Ordered List (Numbered)</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Unordered List -->
<h2>Unordered List (Bulleted)</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
<!-- Nested List -->
<h2>Nested List</h2>
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ol>
<li>Carrots</li>
<li>Potatoes</li>
</ol>
</li>
</ul>
<!-- Definition List -->
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling HTML content.</dd>
<dt>JavaScript</dt>
<dd>A programming language that makes web pages interactive.</dd>
</dl>
</body>
</html>
=====================================================
Links, images and Sections
The <div> tag (short for division) is the ultimate "empty box." Think of it as a transparent container used to group other HTML elements together so you can organize them or style them as a single unit.
The "Invisible" Container: By default, a <div> doesn't do anything visible. It has no color, border, or padding until you apply CSS (Cascading Style Sheets) to it.
Block-Level Element: This means a <div> automatically starts on a new line and takes up the full width available to it, pushing the next element below it.
Organizational Hub: It is primarily used to create sections of a webpage, such as a header, a sidebar, or a gallery grid.
The id attribute acts like a location for an element on a page.
creating anchors or jump links.
Linking to a specific area involves two parts:
The Target (where you're going) and the Link (how you get there).
Assign a unique name to an element using the id attribute.
The name must be unique on that specific page.
<h2 id="contact-info">Enter contact information</h2>
The Link (The Anchor)
To point a link to that ID, you use the <a> tag with a hash symbol (#) followed by the ID name in the href attribute.
<a href="#contact-info">Jump to Contact Information</a>
Case Sensitivity: While modern browsers are forgiving, it’s best practice to keep IDs lowercase and consistent.
No Spaces: Use hyphens or underscores (e.g., id="my-section"), as spaces will break the link.
Start with a Letter: IDs should begin with a letter, not a number or symbol.
Unique IDs: If you use id="header" twice on one page, the browser will likely only "jump" to the first one it finds, and your code won't validate.
The <nav> tag is a semantic element specifically designed to house navigation links. Think of it as a specialized container that tells both the browser and search engines: "The links inside here are the primary ways to get around this website."
Semantic Meaning: Unlike a <div>, which means nothing to a computer, a <nav> clearly identifies a section as navigation. This is huge for SEO and Accessibility (it helps screen readers for the visually impaired jump straight to the menu).
We can link to url's anywhere on the internet.
<a href="https://www.google.com/">clickable text goes to google.com</a>
Or we can link to pages directly in our home directory.
<a href="first.html">clickable text goes to url</a>
Can create a link for an email address.
<a href="mailto:EMAIL_ADDRESS">john.iacovacci@uconn.edu</a>
Linking images - you can link to any image on the internet that is public.
Adds image; it is a separate file located at the URL
Use width and height parameters to control the size of the image displayed.
<img src="images/google_logo.jpg" alt="Google" width="200" height="200">
Embed images into our web pages.
Can also upload custom or searched images to buckets.
Search for Google logo
Scripting & Metadata
<link> – Link external resources (like CSS)
<style> – Internal CSS styling
<script> – JavaScript code
Right click on the image
Save to download folder as google_logo.jpg
Best practices: Create a folder on the bucket for images
Click into folder
Click Upload - Upload files
Select google_logo
File will then appear in the bucket directory
For public URL click on file name
=========================================================
=======================================================
Sections (div,nav,id)
The <div> tag (short for division) is the ultimate "empty box." Think of it as a transparent container used to group other HTML elements together so you can organize them or style them as a single unit.
The "Invisible" Container: By default, a <div> doesn't do anything visible. It has no color, border, or padding until you apply CSS (Cascading Style Sheets) to it.
Block-Level Element: This means a <div> automatically starts on a new line and takes up the full width available to it, pushing the next element below it.
Organizational Hub: It is primarily used to create sections of a webpage, such as a header, a sidebar, or a gallery grid.
The id attribute acts like a location for an element on a page.
creating anchors or jump links.
Linking to a specific area involves two parts:
The Target (where you're going) and the Link (how you get there).
Assign a unique name to an element using the id attribute.
The name must be unique on that specific page.
<h2 id="contact-info">Enter contact information</h2>
The Link (The Anchor)
To point a link to that ID, you use the <a> tag with a hash symbol (#) followed by the ID name in the href attribute.
<a href="#contact-info">Jump to Contact Information</a>
Case Sensitivity: While modern browsers are forgiving, it’s best practice to keep IDs lowercase and consistent.
No Spaces: Use hyphens or underscores (e.g., id="my-section"), as spaces will break the link.
Start with a Letter: IDs should begin with a letter, not a number or symbol.
Unique IDs: If you use id="header" twice on one page, the browser will likely only "jump" to the first one it finds, and your code won't validate.
The <nav> tag is a semantic element specifically designed to house navigation links. Think of it as a specialized container that tells both the browser and search engines: "The links inside here are the primary ways to get around this website."
Semantic Meaning: Unlike a <div>, which means nothing to a computer, a <nav> clearly identifies a section as navigation. This is huge for SEO and Accessibility (it helps screen readers for the visually impaired jump straight to the menu).
=======================================================
<!DOCTYPE html>
<html>
<head>
<title>Basic Anchor Links</title>
</head>
<body>
<h1>CT Innovation Foundry Page</h1>
<p>
<a href="#gemini">Go to Gemini AI</a><br>
<a href="#blockchain">Go to Blockchain Development</a><br>
<a href="#quantum">Go to Quantum Computing</a>
</p>
<hr>
<div id="gemini">
<h2>Gemini</h2>
<p>Gemini is Googles most capable and versatile artificial intelligence.
Think of it as a super-powered digital assistant that doesn't just look up information, but actually understands, creates, and reasons across different types of media.</p>
<br>
<p>Here is a simple breakdown of what makes it unique:</p>
<br>
<p>Most older AI models were like specialized tools: one for text, one for images, and one for audio. Gemini is multimodal from the start, meaning it can "see," "hear," and "read" all at once.</p>
<br>
<ul>
<li>It can write essays, summarize long documents, or debug computer code.</li>
<li>It can look at a photo of a broken bike and tell you how to fix it.</li>
<li>It can watch a lecture and answer questions about specific moments.</li>
</ul>
<br>
<p>Google built Gemini in different versions to fit where you need it:</p>
<ul>
<li>Gemini Ultra/Pro: The most powerful versions, used for complex tasks like scientific research or high-level coding.</li>
<li>Gemini Flash: A fast, lightweight version designed to provide quick answers without a long wait.</li>
<li>Gemini Nano: The smallest version, built to run directly on your smartphone (like the Pixel 9) so it works even without an internet connection.
Gemini is integrated into the Google products you likely already use:</li>
</ul>
<br>
<ul>
<li>In Gmail: It can help you draft a professional email or summarize a long thread.</li>
<li>In Google Docs: It acts as a writing partner to help you brainstorm or rewrite paragraphs.</li>
<li>As a Chatbot: You can talk to it at gemini to plan a vacation, explain a complex topic like "quantum physics" to a five-year-old, or create a workout plan.</li>
</ul>
<br>
<p>
The Big Picture: If Google Search is a massive library where you find books, Gemini is the librarian who has read every book and can answer your questions, write a summary for you, and even help you create your own story.
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="blockchain">
<h2> Blockchain</h2>
<br>
<p>Think of a blockchain as a digital notebook that everyone has a copy of, but nobody can erase or change. Developing it is like writing the rules for how people interact with that notebook.</p>
<br>
<p>Here is the breakdown of how it works without the heavy jargon.</p>
<br>
<p>The Core Concept: The "Shared Ledger"</p>
<br>
<p>In traditional tech (like Venmo or Instagram), there is a central company that owns the database. In blockchain development, you are building on a decentralized network.</p>
<ul>
<li>The Block: A container for data (like a transaction or a piece of code).</li>
<li>The Chain: Blocks are linked using a digital fingerprint called a hash. If you change one block, the fingerprint changes, and the chain breaks. This makes it "immutable" (unchangeable).</li>
</ul>
<br>
<h2>The Two Layers of Development</h2>
<br>
<p>Blockchain development is usually split into two main paths:</p>
<br>
<p>Core Blockchain Development</p>
<br>
<p>This is the "engine" work. You are building the actual blockchain itself (like Bitcoin or Ethereum).</p>
<ul>
<li>Focus: Security, consensus protocols (how the computers agree on the truth), and network architecture.</li>
<li>Languages: C++, Rust, Go.</li>
<br>
<p>DApp Development (Decentralized Apps)
This is what most developers actually do. You aren't building the blockchain; you’re building apps that run on top of it.</p>
<br>
<p>Smart Contracts: These are self-executing scripts. Think of them as a "digital vending machine"—if you put in the right amount of money, the machine automatically gives you the snack without needing a cashier.</p>
<br>
<ul>
<li>Frontend: The part the user sees (standard web tech like React or Vue).</li>
<li>Languages: Solidity (for Ethereum), Vyper, or Rust.</li>
</ul>
</div>
<br><br><br>
<div id="quantum">
<h1>Quantum computing</h1>
<p>Quantum computing is the leap from manipulating bits to manipulating the fundamental laws of physics. While a classical computer (like your phone) is essentially a very fast library of light switches, a quantum computer is a realm of infinite possibilities.</P>
<BR>
<P>To understand it, you have to look at the three "weird" rules of quantum mechanics it uses to solve problems.</P>
<BR>
<H2>The Three Pillars of Quantum</H2>
<BR>
<P>In a classical computer, the basic unit of information is a bit (a 0 or a 1). In quantum computing, we use qubits.</P>
<BR>
<P>Superposition (The "Both" State)<P>
<BR>
<P>Think of a coin. A classical bit is the coin sitting on a table: it is either Heads (1) or Tails (0). A qubit in superposition is like a coin spinning on the table. While it's spinning, it is mathematically both heads and tails at the same time.</P>
<UL>
<LI>The Power: If you have 2 bits, you can represent one of four combinations (00, 01, 10, or 11). If you have 2 qubits in superposition, they represent all four combinations simultaneously.</LI>
<LI>Entanglement (The "Telepathy" State) - You can link two qubits together so that they share a single existence. If you have two entangled spinning coins and you stop one to find it’s "Heads," the other coin will instantly become "Tails," even if it’s on the other side of the universe.</LI>
<LI>The Power: This allows qubits to work in perfect harmony, creating a massive shortcut for data processing.</LI>
<LI> Interference (The "Filter") - This is the hardest part to grasp. Because qubits act like waves, they can interfere with each other. Quantum algorithms are designed to create "constructive interference" (making the right answer louder) and "destructive interference" (canceling out the wrong answers).</LI>
<LI>The Power: It’s like a noise-canceling headphone for math, silencing the billions of incorrect paths to leave only the correct one.</LI>
<BR>
<P>Quantum computers aren't just "faster" versions of our current computers. In fact, they suck at basic tasks like checking email or watching Netflix. They are built for Complex Optimization.</P>
<BR>
<P>Imagine a giant maze.</P>
<BR>
<UL>
<LI>A Classical Computer acts like a mouse, running down one path, hitting a wall, turning back, and trying again. It’s fast, but it’s still trial and error.</LI>
<LI> Quantum Computer acts like a mist that enters the maze. It travels down every path simultaneously and finds the exit in one go.</LI>
</UL>
<BR>
<P> Real-World Applications - We are currently in the "NISQ" (Noisy Intermediate-Scale Quantum) era, meaning we are still building the hardware, but the potential is massive:</p>
<BR>
<P>Decoherence - Qubits are incredibly sensitive. A tiny change in temperature or a stray vibration can cause them to lose their quantum state (this is called decoherence). This is why quantum computers usually look like giant gold "chandeliers" hanging inside massive refrigerators kept colder than outer space. </P>
<BR>
<P>We aren't quite at the stage where you'll have a quantum laptop. Most current work involves "Quantum-as-a-Service," where companies use the cloud to run specific, heavy-duty math problems on a quantum processor.</p>
</div>
</body>
</html>
Interactive Forms
Forms & Input
<form> – Form container
<input> – Input field (text, checkbox, radio, etc.)
<textarea> – Multi-line text input
<button> – Clickable button
<select> – Dropdown menu
<option> – Option in a dropdown
<label> – Label for form elements
Structural / Semantic
<div> – Block-level container
<header> – Page or section header
<footer> – Page or section footer
<nav> – Navigation links
<main> – Main content
<section> – Thematic section of content
<article> – Independent, self-contained content
<aside> – Sidebar or related content
<figure> – Used for images/illustrations
<figcaption> – Caption for a figure
Forms are used to collect data inputted by a user.
An interface for a web application to send data across the web.
FORM defines the form and within this tag.
An action attribute is used to tell the form where its contents will be sent to.
The method attribute tells the form how the data in it is going to be sent.
Get latches the form information onto a web address.
Post sends the form’s information.
<form action="processingscript.php" method="post">
</form>
Action is a program or a gateway.
Input tag allows for data to get into the form.
<input type="text"> is a standard textbox.
This can also have a value attribute, sets initial text in the textbox.
<input type="password">
The characters typed in by the user will be hidden.
<input type="checkbox">
Is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute
<input type="checkbox" checked> - The attribute doesn’t make the initial state of the check box to be switched on, as it were.
<input type="radio"> Is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute.
<input type="submit"> Is a button that will submit the form.
You can control the text that appears on the submit button with the value attribute, for example <input type="submit" value="Click Me Now">.
Textarea - large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes
<textarea rows="5" cols="20">A big load of text</textarea>
Select - Tag works with the option tag to make drop-down select boxes.
<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>
When the form is submitted, the value of the selected option will be sent
Names - form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge">.
Simple form
======================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1 style="font-family: Verdana, sans-serif;">Student Profile</h1>
<form name="myForm" method="post" action="/">
<p>Student Name : </p>
<p><input type="text" name="my-name" value="Your name"></p>
<p>Major : </p>
<p><input type="text" name="my-major" value="Your major"></p>
<p>What do you want to do?</p>
<p><textarea name="my-comments" rows="5" cols="20">Your comments</textarea></p>
<p>Graduation Year :</p>
<p><input type="radio" name="my-grad" value="2025"> 2025</p>
<p><input type="radio" name="my-grad" value="2026"> 2026</p>
<p><input type="radio" name="my-grad" value="2027"> 2027</p>
<p><input type="radio" name="my-grad" value="2028"> 2028</p>
<p><input type="submit"></p>
</form>
<img src="https://storage.googleapis.com/cloud-storage-exam/images/google_logo.jpg" alt="Google" width="300" height="300">
</body>
</html>
========================================================
No comments:
Post a Comment