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>
<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
Most of the content delivered will be delivered within the body tags
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
<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
No comments:
Post a Comment