HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.
HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.
HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.
HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.
What's HTML?? HTML stands for Hyper Text Markup Language. It is a text markup language and it's the standard markup language for creating web pages. What does that mean? A markup language is a computer language that consists of simple keywords, names or tags to help format and structure the way in which text is displayed. There are several markup languages used by coders but html is the most commonly used one and as such it's the standard markup language that most browsers recognize. Simply put, html is what's used to “manually format" text. Formatting basically entails making text bold, italics, underlined and other similar text customization. So now that you have an idea of what HTML is there's one important thing you should know HTML is NOT a programming language, it is a MARKUP language. Why is this distinction important? Programming languages are used to give computers instructions to perform tasks. It tells a computer how to DO something. Programming involves complex levels of instruction to computers. Markup languages are “declarative languages" - they tell the computer what must be done but provide no instructions on how to do it. Markup languages are somewhat simpler than programming languages. As html formats text, which is describing for the computer how it should look, without saying how to get it to look that way it's a markup language. This is a simplified distinction but for now, it's enough to know that html isn't a pprogramming language. After all of this defining you're probably wondering what HTML is actually *used* for For starters, html is used to structure the data and text on websites, apps and other web applications.
Html has a series of “elements” that “wrap” or are placed around portions of text to make it appear or act in a certain way.
Somethings html can do are:
➢ Make text bold
➢ Center text ➢ Male font bigger/smaller
On it's own, html is just a text formatter but when combined with other languages like CSS, Python or JavaScript it can be used to construct fully functional and complex websites. An Example of HTML Code
Source : https://www.w3schools.com/html/html_intro.asp Output of that HTML Code
Source : https://www.w3schools.com/html/html_intro.asp Elements and Tags in HTML Looking at that piece of code on the previous slide you've probably noticed lots of words enclosed in angle brackets, <>.
These words are html “tags”. They are what defines how the text should be displayed and they give structure and organization to a web page.
An html element conaists of a start tag, content to be formatted and then an end tag.
For example:
<tagname> Hello! </tagname>
Tags themselves are not visible to viewers of a website but their effects on the text can be seen. Elements and Tags in HTML continued Elements can be placed inside of other elements, this is known as nesting.
For example:
<Element1>
<Element2>
My favorite color is grey.
</Element2>
</Element1>
Element2 is inside of Element1, therefore anything done to Element1 will affect
Element2 as well HTML Tags and Their Purposes <!DOCTYPE html>
All html documents must start with a
<!DOCTYPE> declaration.
This declaration isn't actually an html
tag, it's a type of information telling te browser what type of document to expect so it knows how to read/display it.
The latest version of html, HTML 5 uses
<!DOCTYPE html>. This declaration is not case sensitive, but doctype is generally written in all caps. HTML Tags and Their Purposes <a> </a> This is the “anchor” tag. This tag creates a hyperlink which is used to link to another web page, file, email addrers, another location in the same page or anything that can be addressed by a URL. These links have a “href” (hyperlink reference) attribute which indicates the destination of the link. A “deadlink” can is when an anchor link is created but there is no defined destination for the link to go to. The “target” attribute can be used to specify where the link should be opened. If yhe target is not specified then the link opens in the same browser page. target=”_blank” - opens the link in a separate browser page. Source : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a Source : https://www.javatpoint.com/html-anchor HTML Tags and Their Purposes <div> </div> This element creates a division or section of an html page. It's essentially an all-purpose container, any sort of content can be placed within or it can be left empty of content and simply styled using CSS. It does not inherently represent anything or have a specified purpose like the other container elements <body>, <head>, <p>, etc. By itself the div element has little effect on the web page. It's used to group content and for other organizational purposes. When used in tandem with CSS div elements can be used as the building blocks for complex animations or they can be given special effects. Source : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div Source : https://developer.mozilla.org/en-US docs/Web/HTML/Element/div HTML Tags and Their Purposes <br> This element crates a break in lines of text. The text will restart on the next line. It is very useful in instance where the division of lines of text is significant eg poems, letter introductions or simply for stylistic preferences. There is no end tag as this is what is known as an empty tag. As there is a singular purpose for this tag (to create a line break in text) there is no visual output for this tag (it cannot be seen by viewers of a website), also there are minimal styling options for this element. Source : https://www.w3schools.com/tags/tag_br.asp HTML Tags and Their Purposes <hr> This element stands for horizontal rule and represents a thematic break or change in the content of a page. It separates a document into sections based on similar content. It is generally displayed as a horizontal line and unlike the <br> tag there is a visual output for this tag. It is an empty tag and therefore does not require an end tag. Source : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr It's time for….………….
TRIVIA Which would be bigger a h1 element or a h6 element?
A. The h1 element B. They'd be the same size C. The h6 element D. There's no h6 element And the answer is……..
A. The h1 element What type of language is html? A. English B. A programming language C. A computer language D. A markup language And the answer is……..
D. A markup language Which of the following can you do with html
A. Build a time machine
B. Play Despacito C. Format text D. Build a video game And the answer is……..
C. Format text Are tags visible to viewers of a webpage?
A. Yes they are
B. Tags are the only thing viewers see C. Viewers can't see webpages D. No, viewers can't see tags And the answer is……..
D. No, viewers can't see tags
What is it called when an element is placed inside of another element?
A. Nesting B. There's no specific name for that C. Matryoshka D. Roosting And the answer is……..
A. Nesting Thanks for coming everyone! We hope you had a great time and we'll see you soon!
