HTML Primer
Hypertext Markup Language (HTML) is the language that will “mark up” pages for display in a web browser.
HTML is used to publish various document types for easy access.
The hyper link process allows users to easily access these documents as well as other internet web locations.
Also, HTML forms allow a way to provide input fields to collect various data types from users visiting sites.
An HTML document consists of a series of commands identified by tags.
Each TAG is started with a < symbol and ends with a > symbol.
An HTML document consists of a series of commands identified by tags.
Document Structure
HTML pages start with the <!DOCTYPE html> command.
When pages are delivered to a browser this command will tell it that the content delivered will be in HTML format.
The <HTML> tag tells the browser this is the start of HTML commands.
The <HEAD> section of the document holds the metadata of the page.
Metadata generally classifies the document title, styles of pages, scripts used. It provides information about the page and helps search engines and web services identify what the page contains.
<meta charset=”UTF-8”> identifies character set encoding used.
<meta name=”description” content=”what is this page about”>
Used for search engine optimization(SEO)
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Used to tell browsers how to scale screen display e.g. mobile.
<meta name=”author” content=”John Iacovacci”> identifies page author.
<title>Web site description</title> Used to display a title on the web browser tab.
<link rel=”stylesheet” href=”style.css”> Identifies the file that contains the CSS style commands for web page formatting
Body section
This section starts with <BODY> tag which instructs the browser that this will start the commands that will be displayed within the web page.
The 6 headings tags <h1>,<h2>,<h3>,<h4>,<h5>,<h6> will display headings starting from the largest size <h1> LARGEST </h1> to smallest <h6>small</h6>
The paragraph tag <p> will display text inside the tags.
<p>Places text in paragraph format</p>
These tags help organize your writing and make it re
Some formatting tags can also be used on text.
<b>bolds </b>
<i>italicized</i>
<br> creates a blank line
<hr> draws a horizontal line
These tags don’t use the end tag
List tags <ul> and <ol> create unordered lists(bullet point) and ordered lists(numbered) in the page
<ul>
<li> Item </li>
<li> Item </li>
<iI> Item <li>
</ul>
<ol>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
The <a href> is used for linking to another page or web page section.
<a href=”https://google.com”> Takes you to Google.com </a>
The <img> tag tells the page to display the image which the link point to.
<img src=”google_logo.jpg” alt=”google logo”>
The <div> tag creates an area of the web page to perform actions on like advancing.
Basic HTML Document
=================================================
<!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. It is important to create a directory for each assignment to separate work and navigate to that 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. Note: That file is now located in the web-examples sub-directory.
Hit Open Terminal.
Change directory to web-examples in order to move that file to your bucket.
john_iacovacci1@cloudshell:~ (cloud-project-examples)$ cd web-examples
john_iacovacci1@cloudshell:~/web-examples (cloud-project-examples)$
Move file to cloud storage bucket.the gsutil command allows you to manage Google cloud storage. The cp command will copy the file based on where the file is. Without a path it looks for the file in the current directory. The gs://your-bucket-name/ will be the location on cloud storage where you would like the file to appear.
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.
Now we can go to our storage bucket to view the file.
View bucket list
Click in to bucket
Click on the file name Note:Access granted to public principals allows everyone to view web page
Click on the Public URL link
The page is now displayed
Images
Images can be loaded to the storage bucket for web site access or loaded from a publicly available image on an internet location.
To find an image to use go to images.google.com
For my site I want to pull the google logo into my site
Enter the description of the image you want to use
Select the image you want to use and right click the mouse
Give the file a name and Save to download folder as google_image.png.jpg:
Note it should appear in the local computers down load directory
Best practices: Create a folder on the bucket for images
Click into folder
Click Upload - Upload files
Click on file you want to upload then hit OPEN
File will then appear in the bucket directory
For public URL click on file name
Image will appear in browser
Incorporate tags into web page
Now lets build a page that contains all the tags described above and move it to our cloud storage bucket
=========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Tags 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><i>Italic Text:</i> This is <i>italic</i> using <i>.</p>
<br>
<hr>
<br>
<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>
<br>
<hr>
<br>
<h1> HTML links and images</h1>
<p> The HTML tags provide links to google.com and our uploaded google image</p>
<a href='https://google.com'> Takes you to Google.com </a>
<br>
<p> Copy the link from the image cloud storage bucket and paste it in the img arc tag</P>
<img src='https://storage.googleapis.com/cloud-storage-exam/images/google_image.png' alt='google image'>
</body>
</html>
=====================================================
Interactive Forms
HTML forms are used to collect input from web users for processing and storing for host systems. Forms allow data to be sent from the local web browsers back to the web servers that the user connects to.
Forms & Input
The <form> tag identifies to the browser the area where data is to be collected or a container.
<input> tag identifies each field needed to be collected.
It is combined with an attribute to provide the proper collection actions based on various options
<input type="text"> collects data to a standard text box
<input type="password"> masks that data so it can not be seen on screen.
<input type="checkbox"> allows users to check multiple options to send.
<input type="radio"> allows users to select only one of the options displayed
<input type="submit"> send all the data entered in the form to the web server.
<button type="submit">Send data </button> Also send data to web server
<textarea rows="5" cols="20">The Textarea tag allows for larger blocks of text to be entered.
<form action="processdata.pl" method="post">
The FORM action attribute tells the form what process to send the data.
The method attribute tells the form how the data in it is going to be sent.
The post action instructs http how the data is being sent.
The <label> tag identifies what the input is used for.
Select - Tag works with the option tag to make drop-down select boxes.
<select>
<option>choice 1</option>
<option>choice 2</option>
<option">choice 3</option>
</select>
When the form is submitted, the value of the selected option will be sent
Names - form fields need names so the data can be identified. Simple form
======================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
</head>
<body>
<h1>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="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="radio" name="my-grad" value="2029"> 2029</p>
<p><input type="submit"></p>
</form>
</body>
</html>
========================================================
No comments:
Post a Comment