HTML primer
Hypertext Markup Language (HTML) is the language for delivering content on the Web.
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. An example of a tag is <img src="home.gif"/>.
Simple tags
<H1> first heading largest size
<P> Start a paragraph
<a> anchor The <a> element, or anchor element, it used to create a hyperlink to another webpage or another location within the same webpage
<TAGNAME> CONTENT </TAGNAME>
This particular tag will display the image held in the file home.gif. These tags are the markup. It is through the use of tags that hyperlinks, images, and other media are included in web pages.
Basic HTML can include directives for formatting in a language called Cascading Style Sheets (CSS) and programs for interaction in a language called JavaScript.
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 is a programming language that’s used to make the website dynamic and interactive
BASIC HTML STRUCTURE AND TAGS
An HTML element begins with a starting tag, which is followed by the element content and an ending tag. The ending tag includes a / symbol followed by the element type, for example /head. Elements can be nested within elements. A standard HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Very simple example
</title>
</head>
<body>
This will appear as is.
</body>
</html>
This document consists of the html element , indicated by the starting tag <html> and ending with the closing tag: </html> .
This head element contains one element, title
Title will display on the web browser giving users clarity on what the page is about
first.html
Most of the content delivered will be delivered within the body tags
The <!DOCTYPE html> declaration is used to inform a website visitor's browser that the document being rendered is an HTML document. While not actually an HTML element itself, every HTML document should being with a
DOCTYPE declaration to be compliant with HTML standard
some other simple tags
Heading tags H1 to H6 scale down in size
<!DOCTYPE html>
<html>
<head>
<title>Headings
</title>
</head>
<body>
<H1> HEADING 1 </H1>
<H2> HEADING 2 </H2>
<H3> HEADING 3 </H3>
<H4> HEADING 4 </H4>
<H5> HEADING 5 </H5>
<H6> HEADING 6 </H6>
</body>
</html>
some other simple tags
<pre> Creates preformatted text </pre>
<em>Creates address section, usually processed in italics</em>
<strong> Emphasizes a word (usually processed in italics) </strong>
<p> Creates a new paragraph</p>
<br>Inserts a line break (carriage return)<br>
<blockquote> Puts content in a quote - indents text from both sides</blockquote>
<div>Used to format block content with CSS </div>
Lists
<ul> Creates an unordered list
<li>Encompasses each list item </li>
<li>Next List Item </li>
</ul>
<ol> Creates an ordered list
<li>first</li>
<li>second</li>
</ol>
Creates an ordered list (start=xx,
where xx is a counting number)
<li> </li>
Encompasses each list item
<hr>
Inserts a horizontal rule
Now lets look at links
We can link to url's anywhere in the internet
<a href="https://www.awseducate.com/">clickable text goes to url awseducate.com</a><br>
Or we can link to pages directly in our home directory
<a href="simple.html">clickable text goes to url</a>
Can create a link for an email address
<a href="mailto:EMAIL_ADDRESS">john.iacovacci1@gmail.com</a>
Also, can link to different sections of a web page using NAME
Creates a hyperlink to an email address
<a name="NAME">
Creates a target location within a document
<a href="#NAME">clickable text</a>
Creates a link to that target location
Linking images - you can link to any image on the internet that is public
<img src="https://uconnhuskies.com/images/logos/site/site.png"/>
Adds image; it is a separate file located at the URL
<img src="images/Bagel-Plain-Alt.jpg" alt="Plain Bagel" width="200" height="200">
Next let's embed images into our web pages
interactive
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 needed 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.
EXAMPLE
<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 makes 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
textarea is, basically, a 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
The 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
All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a form-handling script, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge">.
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>
<p>Species:</p>
<p><input name="species"></p>
<!-- remember: 'type="text"' isn't actually necessary -->
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>
<p><input type="submit"></p>
</form>
No comments:
Post a Comment