Intro to HTML: HyperText Markup Language

• Building web applications involves working on the front-end, back-end, and connecting the two.

Web Development Fundamentals

• This lesson explores how the internet operates behind the scenes
• Goal: collaborate effectively with engineers
• Goal: begin a career in web development

Overview of the Internet

• The internet has greatly impacted how information is consumed and communication occurs.
• Globally, there are over four billion internet users.
• The worldwide web hosts nearly two billion websites.

The Ever-Expanding Network

• 1969: The United States Department of Defense created ARPANET, a precursor to the internet.
• ARPANET stands for Advanced Research Projects Agency Network.
• ARPANET connected supercomputing centers run by government agencies and universities for large-scale information transfer.
• The 1970s: TCP/IP (transmission control protocol and internet protocol) was created to standardize data transfer between networks.
• TCP/IP was researched and specified throughout the 1970s, becoming adopted in the early 1980s.
• Different networks adopted TCP/IP
• Different networks formed today's internet.

The World Wide Web

• The internet and the world wide web are different.
• The internet is the network of connected computing devices.
• As of the 1980s, browsing was difficult to do, though the internet existed.
• The internet sent messages from one computer to another.
• 1989: Tim Berners-Lee invented The world wide web.
• The world wide web is a collection of linked sites and web resources.
• The advent of web browsers in the 1990s made user-friendly interaction and browsing of multimedia content possible.
• The invention of the world wide web led to the internet being used more widely in society in the 1990s, creating variety of websites, still in use now.

Browsers and Servers

• The internet connects computer devices globally, enabling information sharing across vast distances.
• The client-server model helps understand information sent from one device to another.
• The client makes a request for data.
• The client can be an application or browser on a device like a laptop, smartphone or tablet.
• A server waits for requests and sends back data.
• A server could be an in-house, rented data center, or cloud server.

404 Status Code

• Server specifies a status code as a part of the response, when responding to a client.
• HTTP status codes indicate if the HTTP request was successful; if not, the status code contains info about the error.
• Status codes assist the browser on how to handle data sent back with a response.
• 200 OK: The request has succeeded.
• 301 Moved Permanently: The resource has been moved and the client is being redirected.
• 404 Not Found: The requested resource was not found.
• 500 Internal Server Error: The server encountered an unexpected error.

How Do Browsers Work?

• Devices send requests for each file that makes up a page, when loading a webpage.
• The browser searches for elements in the HTML file and starts making HTTP requests for external resources.
• External resources often include one or more CSS stylesheets (CSS creates webpage style/layout).
• For CSS stylesheets, the browser requests the CSS stylesheet
• The browser analyzes the CSS, when the server sends it back
• The browser applies visual styles to content

Web 2.0

• Early static websites: text, images, and links with minimal interactivity.
• Static websites do not change based on user behavior.
• Web technologies progressed and internet connection speeds increased, allowing more interactions on the web.
• Early 2000s: Collection of advances created Web 2.0 web applications.
• Web 2.0 applications have these qualities compared to early static sites:
• They provide dyanmic user experiences with content responding to user input without page reloads.
• They emphasize user generated content and social sharing
• Users can create content and share it with others due to the rise of social media, blogging, and wikis.
• JQuery was the first JavaScript framework able to fetch date while a page is running.
• Web frameworks connected to databases like Spring, Ruby-on-Rails, and Django allow user-generated content to be stored, created, and displayed effectively

Current Internet Trends

• Internet-connected smartphones have changed how users interact with the internet.
• Mobile internet traffic: accounts for more than half of all internet traffic
• Web development practices evolved to provide good user experience across devices.

Responsive Web Design

• Responsive web design has changed sites are built.
• Additions was enabled by CSS features like media queries and relative units.
• Presentation adjusts based on window size.

Mobile Applications and Devices

• Internet-connected mobile apps changed how people browse the internet.
• Smartphone users: likely to spend more time in apps than their phone's browser.
• Most mobile apps: internet-connected, not part of the world wide web.
• The web relies on links, while mobile applications aim to hold one's attention.
• Web development is a great starting point for mobile development.
• While most mobile apps are built using programming languages, such as Swift for iOS, Javascript is becoming more common among developers of new apps.

Languages for Web Development

• Millions have learned to build websites/web applications, thanks to Codecademy.
• Web development skills let you build anything simple websites, to complex web app, to browser games.
• HTML structures website content.
• CSS applies styling to websites.
• JavaScript adds interactivity to websites
• SQL allows web applications store and retrieve data
• The first step to building a website is learning HTML, the skeleton of all web pages.
• HTML gives structure to content, inlcluding text, media, buttons, etc.

What is HTML

• Learning to code is practical with HTML.
• After learning a little HTML you can build basic websites with text, media, and videos.
• The acronym HTML stands for hypertext markup language

HTML Markup

• The ML in HTML: stands for markup language.
• Markup: annotating text in a distinguishable way.
• HTML annotates the content within a web page.
• HTML separates content/annotation using HTML tags
• These tags are denoted by angle brackets

HTML Elements

• HTML tags: the "markup" for HTML
• HTML tags are annotations
• Example the contents of an HTML tag:
• one opening Tag
• content within the tag
• a closing tag.
• HTML element is formed by elements containing HTML tags and the text or media it contains.
• The "opening tag" is used to start an HTML element (tag type wrapped in angle brackets).
• "Content" is the information in-between the elements of an HTML tag.
• The "End tag" is used to end an HTML element; they're surrounded by a forward slash and angle bracket.

Common Tags

• ``: This is a heading, it emphasizes text.
• <p>: This is a paragraph, it is the most common tag for larger chunks of text.
• ``: This is an anchor tag, used to specify the text that is the "anchor" for a link.
• <button>: This is a button.

Hypertext and the World Wide Web

• The H and T in HTML stand for hypertext.
• Hypertext: Text linked to other text.
• HyperText indicates the text expands far beyond the normal written word when implemented.
• HyperText can browse from link-to-link to find topics of interest and customize their "path" through the web.
• After the advancement of websites, rich user experiences, like embedded videos, animations, and interactivity, have advanced. Still the core of the web is made of Hyperlinked documents.

Adding Hyperlinks

• Reading and editing code makes it easier to build from scratch for the web.
• HTML provides more data by using an attribute (name/value pair).
• Links can be created in HTML using the href attribute (hyperlink reference) to specify a URL for the link.
• An example of adding the href attribute to the HTML is by assigning value www.codecademy.com to the href attribute.

What is CSS?

• HTML: lets users build content for the website
• CSS: Style for the HTML like colors, layout, placement, etc..
• This content/presentation break is for maintaining the computer. A good section of code should solve specific sections and problems.
• The styles are separated meaning adding things like images, paragraphs. These can be styled for saving time.

Applying CSS

• CSS gives websites look and feel.
• For CSS files the HTML lets you apply CSS styling to the current website.

What is JavaScript?

• The use of websites looking polished is done by the site appearing more interactive. JS is needed for this.
• These website features are commonly built with JavaScript:
• Popup Adds
• Interactive audio/videos
• Real time user mapping

JavaScript Functions

• JavaScript responds to browser events.
• These events can be the user clicking a button, re-size the window, etc.
• Key blocks include:
• Functions: can re-use chunk of code again and again.
• Events: these let JS respond to users behavior like resizing windows

What is SQL?

• SQL- structured Query Language: the tool to store and retrieve data.
• It saves, changes, and accesses data. This includes addresses, payment, usernames, etc....
• Information gets saved in Tables (rows and collumns of information). The tables help get information.

What is Programming?

• Coding is the process of converting the instructions created in programming, to a written language the computer can understand.
• Programming: mental proces of thinking instructions to give a machine such as the computer.
• Coding: ideas transforming into written language.

Introduction To HTML

• HTML skeleton of web pages is the language for the following:
• Designers
• Marketers
• Developers
• Provides page content structure such as text, videos, and images. Inspecting pages show HTML in a panel. The acronym for HiperText Markup Language.
• "Markup language": computer language defining structure/presentation for the text.
• Computer reads raw text wrapped in HTML elements.
• Hypertext shows access to text displayed on computer through hyperlinks.
• HTML is used to create sites. This helps inject snippets of newsletter, blog, and website templates.
• You can layer js and CSS with HTML to Compel Dynamic sites visually

HTML anatomy

• elements are organized into structuring the webpage.
• The HTML paragraph element is made of:
• Opening tag: The type Surrounded by brackets.
• Content: information in-between HTML.
• Closing tag.
• A tag & content is called an HTML element, & there are several to help modify items such as text.
• Reviewing HTML tags:
• Unit of content built out of tags and the text or other containing media
• the element name is surrounded by opening bracket.
• First tag helps you to start the element in the tag type, closing around the brackets
• Inside the name contained with in the tags
• End tags

The Body

• This is a key HTML element when building A web page. Inside the body tags is where content will appear on screen. HTML is organized into tree of relationships.

HTML Structure

• HTML organized as a collection of "family tree relationships" elements placed within other elements become a part of the "child element" which needs a parent.
• In multiple levels of nesting, " grand children" get involved. The relationships are called"hierarchy". This is used to create a more complex tag.
• Because a child inherits behavior styling from the parent element structure is important/ the hierarchy.

Headings

• Headings capture the readers attention, used in a variety of ways, ex: titling articles
• HTML follows a similar pattern; there are six different heading or heading elements that vary in purpose. The list below varies in order of size:
• ``:main heading
• ``Sub Headings
• The heading captures the attentions of readers.

Divs

• Divs are elements in HTML the short hand for "division" or a container that divides pages into sections. Grouping things together help use an HTML togehter Thes do not contain inherently representable visuals, but they assist styling help simplify styles you see inside Learn CSS. They read from top to bottom.

Attributes

• Expanding the element's code base can be done doing so using an attribute. Attributes can be different for elements when they are added to content to add more of a style. This follows 2 parts:
• Names and values.
• A common "id" can specify the content of the divs. It has several purposes.

Displaying text

• To display text you the following:
• use Blocks of plain text
• Short pieces of text that seperate content. These show actions of a span.

Styling text

• Styling text can be done using HTML and tag's such has and. They show highlights that can come in handy when reading the document. Web pages style these out using tag's and Browsers that have inbuilt style sheet to generally style these tag's and the style will come into affect when using the action.

Line Breaks

• The length of code doesn't represent the elements in the browser. If you would like to modify space using HTML code breaks that consist of starting tags only anywhere around the HTML code will show in break in browse.

Unordered Lists

• Listing and Organizing text in an easy-to-read format can create a list in particular order. HTML can use an unordered list tags where a listed Item can be added using a Bullet points. The should no text, format and only in elements form out of a unordered list

Ordered Lists

• Ordered lists are like unordered lists and they all have a numbered list for items that are numbered. Helpful if you need to list different steps for a process or to rank a process from first to last There can be created from the lists tags and then the lists can be created from tags.

Images

• All of the elements have text/text. images need to use the tag allow to add img to webpage most require a slash "self closing tag. The tag has required called src. The src can then be the image source to look at when adding the file.

Image ALT's

• Its important when developing to consider all backgrounds when making a website, so in these assistive technologies the HTML should add ALT tags. that give a little more information about the image. The ALT attributes can support these ideas.
• IF and image fails to load, the user is given a description and it helps with visually impaired users as well for those who are using aid software, or screen readers or other devices that can look at the site. If you make the ATL, it will not display to the user.

Videos

• To add HTML that supports display it by also adding videos. The media link and the SRC link are a link with a particular source with an open and close tag. A SRC is needed when it is added on the page itself. This can be either to the source of the page or media hosted on another page.
• After the SRC width and height are used in a video and the code controls the tag which directs pausing and play .If it does load then tags will display if the browser cannout load the video.

Preparing for HTML

• Time to learn to setup/ learn more about tags and elements for the HTMl files. If you have to display properly certain elements can assist in properly display document when you would want to web browse know you want to use through by the beginning of document type declaration. The document is structured such as instruction

The \ Tag

• The Declaration can allow HTML instructions.
• The document actually adds structires. tags have to start and finish after the document. Anything in those has to be html. it can mess up the HTML. Browsers cannout read code correctly.

The Head

• The document has to declare a type HTML, but it can add a tag to give more info. The can give web browsers a little more information. Goes above body element. has meta for webpage. display info the body will display.
• Add some info with it. The tag goes above the document.

Page titles

• The displays the title specified displays with a tag, always Inside .

Linking TO other pages

• HTML's ability is to link to other webpages. to add a link can bwe done by adding element and add including texts between the tag.
• the anchor requires and element HTML is to link to a path that provides hypertext.

Opening links in a new window

• Clicking on one or more links will help show pages that don't link. That are useful to show. It requires 1 value. The the open tag or the anchor just like the HREF:

Linking to relative pages.

• linking is how pages are built. This will now talk internal pages. HTML is a new page that must have file stored or multi pagr with HTML code folder with file storage .
• A is a file name and shows how other sides are.

Linking at will.

• People use sites with links that are images. HTML allows a new element to move with the tag.
• a helps add elements.

Linking to Same page

• How does a user jump from section to section? target a attribute must have a list like the following this is where content can have ID attributes linked.

Indentation

• HTML standard. The tag looks indentated/ HTML files support adding comments into files to help remember what part of the code reads and to reformat the code. The tags are usually ignored/dont show

• Create A table element

• Before displaying data, we must first create the table that will contain the data by using the element. The element will contain all of the tabular data we plan on displaying.

Table rows

• There are many ways to create tables from a table that has been predefined, meaning the rows, columns and data cells are not created.The first step in entering data into the table is to add rows using tag:
• Tag
• and then can create more rows with the tag.

Table Data

• There isn't sufficient when only adding to rows. Each element must alsonbe defined from HTML/ you can use to add data elements:

Table Headings

• HTML adds to many rows and collumns, you should have headers
• Table codes can look strange, but analysing and practicing is important
• to create code analysis. 1 can specify with rows can be clear.

Table Borders

• Tables have borders, to add to is used attributes.

Spanning columns

• The table is spanning data
• For example 1 can use the calendar app, spans dates/ times This can be used for calendar management
• Data spans collumns using the attribute

Spanning Rows

• Data can also span multiple rows using an attribute. The attribute can specify multirow data, perhaps an event that has some hours with in a day. It accepts more numbers equal to the range rows of data There are generally 4,

Table Body

• Overtime a table can grow to contain a lot data and become very lond . when this happens the table can be easy with bodies. the elemnet should contain the data table data with out head and all.

Table Head

• HTML head will give section for head tags with headings and elements the column has to state elemtons/ or tags

Table Footer

• The bottom is going to be the bottom tag which defines the bottom.
• CSS adds styling for the content with style sheets to the web. it requires all the main components for styling.

Intro to semantic HTML

• building websites that consist of semantic and non semantic HTML. semantics is a way to create that. provide data with the opening and closing by creating HTML elemrnts will be HTML based around the text that it contains. The non semantic wont give a context like span

Why use HTml

SEMANTICS for HTML are much more accessible for users. Because devices and scren reads, codes are esier for people to use.SEO which is the website optimisation. It improves user experience

• To beter represent a page, use codes that provide extra context.

Header and nav

lets look at some for that. is a constainer for navigation intro content and code . using tag makes codes easier ot read

Mian and footer

These help describe where an element is located based on coverntieons and and help identify elements it seperate of web page where the web and browser better. how does is this incorporated, the code is a great questions HTML can make text based so lets talk attributes everyone loves sureley. Audio elements have to embed the data such as link

Semantic HTML

Audio Elements need control given they're integrated to the browser. is usually the SRC audio files usually are in

This lesson explores the fundamentals of HTML, including its function as a markup language and its role in web development. It also covers benefits of learning HTML and how browsers handle assets, CSS, and JavaScript for webpage rendering. It's suitable for beginner web developers.