HyperText Markup Language
Markup Langage
- Presentational Language
- No logic or algorithm
- Used to define the structure of data
- Use tags or elements enclosed in angle brackets (<>)
- The tags describe the content
- HTML, XML, Markdown, BBCode
Scripting Language
- Scripting languages enable the creation of dynamic and interactive content.
- They usually integrate and communicate with other languages
- They are used to write smaller tasks within a larger system
- They can be used to build web applications, perform calculations, manipulate data, and control the flow of program execution.
- They are executed directly by another program (like a web browser) rather than being compiled into machine code
- JavaScript, PHP, Python, Ruby
Programming Language
- used to create standalone software applications, perform complex calculations, implement algorithms, manage memory, and interact with external hardware.
- They have rich and complex syntax.
- Used for software, drivers, etc.
- They often have to be compiled into machine langage to be executed directlyby the computer
- C, C++, C#, Java, Swift, Rust, PHP, Python, Ruby
Evolution of the Web
Web 1.0
- Around 1991
- Static Pages
- Web applications were written using markup languages only
- Content was positioned and aligned using frames and tables. table positioned website.
Web 2.0
- Around 1999
- Rich User experiences. Highly interactive websites.
- User participation, and user generated content:
- Blogging
- YouTube
- Wikipedia
- Social Networks
- Use of back-end languages: (PHP, PERL, Ruby, Phyton etc).
Web 3.0
- Called the decentralized web, aims to make the web more intelligent, secure and user focused
- Semantic web.
- Artificial Intelligence and Machine Learning.
- 3D Graphics for AR and VR
- Everything will be interconnected.
- Blockchain, Cryptocurrency.
- More user controlled experience.
HTML is all about containers
![illustration of recyclin bins](../static/images/html-boxes.png)
Every tag has a purpose
![illustration of recyclin bins](../static/images/html-recycle.png)
Anatomy of an HTML page
- DDOCTYPE: Tells the browser the file type
- html: Indicates that anything between them is html 5 code, language and reading direction.
- head: Contains page information (title, links to external files etc.) to be used by the browser. This area is not displayed on the browser.
- title: on the head tag is not visible on the page but at the top bar on the browser.
- body: Main content of the webpage. Contains all the other html tags and is what you see on your browser.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <!-- Here there is page information for the browser, links to external files needed. Not visible on the actual webpage.--> <meta charset="utf-8"> <title> This is the page Title on the top of the browser </title> </head> <!-- This is what's visible on the website --> <body> <section class="bg-primary"> <div class="wrap"> <h2> This is a Heading</h2> </div> </section> </body> </html>
Anatomy of a WEBPAGE
- Header: Not to be confused with the head html section. The header usually contains the Page Title, the logo, main navigation. It is used as an introduction to the page.
- Main:Is where the main content of the page is. It can contain sections, articles and any type of content.
- Footer: Used as a closing for the page, usually contains, copyright information, secondary menus, contact information.
![diagram of a website and its parts](../static/images/website-parts.png)
Web links
- Links to other pages or files on your website
- <a href="myPage.html">
- Links to other websites
- <a href="http://otherPage.html">
Anchor Links
- Links to other sections of the same page
- identify the link using the #
- <a href="#newSection">
- And the target section
- <p id="newSection">
Email & Phone Links
- Opens your default email client
- myEmail@email.com
- <a href="mailto:myEmail@email.com">
- Vulnerable to spam bots getting your email address unless you use some scripting to encript the address.
- Call me at 305-123-4567
- <a href="tel:3051234567">
More on Tables
![tables](../static/images/tables.png)
Column modifications
- Table headers: th
- Table Head: thead
- Table Body: tbody
- Table Footer: tfoot
- Span cells across columns: colspan="2"
- Span rows: rowspan="2"