{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "---\n", "layout: post\n", "hide: True\n", "title: Basics of HTML Guide\n", "description: An introduction to basic HTML, and resources to learn more.\n", "type: hacks\n", "permalink: /basics/html\n", "comments: true\n", "---" ] }, { "cell_type": "raw", "metadata": {}, "source": [ "
Home HTML Data Types DOM JavaScript JS Debugging
\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "# How does HTML work?\n", "Similar function to Markdown, syntax defines how stuff should be displayed\n", "- HTML is based on beginning and closing tags `content`\n", " - Note the \"/\" on the ending or closing tag of the pair" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Compare markdown to html below\n", "This below example shows comparison of a [heading](https://www.w3schools.com/html/html_headings.asp) and [paragraph](https://www.w3schools.com/html/html_paragraphs.asp). Click on links to see many more HTML examples." ] }, { "cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [ { "data": { "text/markdown": [ "\n", "### Markdown: This is a Heading\n", "\n", "This is a paragraph\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%markdown\n", "\n", "### Markdown: This is a Heading\n", "\n", "This is a paragraph\n" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "vscode": { "languageId": "html" } }, "outputs": [ { "data": { "text/html": [ "\n", "

HTML: This is a Heading

\n", "

This is a paragraph.

\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", "

HTML: This is a Heading

\n", "

This is a paragraph.

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Attributes\n", "- Learn about [attributes](https://www.w3schools.com/html/html_attributes.asp) \n", "- Tags can have additional info in the form of attributes\n", "- Attributes usually come in name/value pairs like: name=\"value\"\n", "\n", "```html\n", "inner html text\n", "```\n", "\n", "- href example with attribute for web link and inner html to describe link\n", "\n", "```html\n", "Visit W3Schools HTML Page\n", "```" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Sample Markdown vs HTML Tags\n", "Image Tag - Markdown\n", "\n", "```md\n", "![describe image](link to image)\n", "```\n", "\n", "Image Tag - HTML\n", "\n", "```html\n", "\n", "\"describe\n", "```\n", "\n", "Link Tag - Markdown\n", "\n", "```md\n", "[link text](link)\n", "```\n", "\n", "Link Tag - HTML\n", "\n", "```html\n", "link text\n", "```\n", "\n", "Bolded Text - Markdown\n", "\n", "```md\n", "**Bolded Text**\n", "```\n", "\n", "Bolded Text - HTML\n", "\n", "```md\n", "Bolded Text\n", "```\n", "\n", "Italic Text - Markdown\n", "\n", "```md\n", "*Italic Text*\n", "```\n", "\n", "Italic Text - HTML\n", "\n", "```md\n", "Italic Text\n", "```" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "P tag (just represeants a paragraph/normal text)\n", "\n", "```html\n", "

This is a paragraph

\n", "```\n", "\n", "Button\n", "\n", "```html\n", "\n", "```\n", "\n", "Div (groups together related content)\n", "\n", "```html\n", "\n", "
\n", " \n", "

This is the first paragarph of section 1

\n", "

This is the second paragraph of section 1

\n", "
\n", "\n", "\n", "
\n", " \n", "

This is the first paragarph of section 2

\n", "

This is the second paragraph of section 2

\n", "
\n", "```\n", "\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Resources\n", "- https://www.w3schools.com/html/default.asp\n", "- I will show a demo of how to find information on this website" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# HTML Hacks\n", "- Below is a wireframe for an HTML element you will create. A wireframe is a rough visual representation of HTML elements on a page and isn't necessarily to scale or have the exact styling that the final HTML will have. Using the syntax above, try to create an HTML snippet that corresponds to the below wireframe.\n", "- The \"a tags\" can contain any links that you want\n", "\n", "![wireframe for html hacks](/han3/images/wireframe.png)" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "vscode": { "languageId": "html" } }, "outputs": [ { "data": { "text/html": [ "
\n", "

Passion Project

\n", "

The Culture and History of Art

\n", "

Our group found that we all have somehwat of an interest in visual arts. Out plan is to create a website where you can search up different artists and their paintings that are most well known to people.

\n", " \n", "\n", " \n", "
\n", "\n", "
\n", "

Some Famous Artists

\n", "

- Katsushika Hosukai - Hosukai was a Japanese ukiyo-e artist of the Edo period, active as a painter and printmaker.

\n", "

- Gustav Klimt - Klimt was an Austrian painter who is noted for his paintings, murals, sketches, and other objets d'art.

\n", "

- Sandro Botticelli - Sandro Botticelli was one of the most esteemed artists in Italy. His graceful pictures of the Madonna and Child, his altarpieces and his life-size mythological paintings, such as 'Venus and Mars', were immensely popular in his lifetime.

\n", "
\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "\n", "%%html\n", "
\n", "

Passion Project

\n", "

The Culture and History of Art

\n", "

Our group found that we all have somehwat of an interest in visual arts. Out plan is to create a website where you can search up different artists and their paintings that are most well known to people.

\n", " \n", "\n", " \n", "
\n", "\n", "
\n", "

Some Famous Artists

\n", "

- Katsushika Hosukai - Hosukai was a Japanese ukiyo-e artist of the Edo period, active as a painter and printmaker.

\n", "

- Gustav Klimt - Klimt was an Austrian painter who is noted for his paintings, murals, sketches, and other objets d'art.

\n", "

- Sandro Botticelli - Sandro Botticelli was one of the most esteemed artists in Italy. His graceful pictures of the Madonna and Child, his altarpieces and his life-size mythological paintings, such as 'Venus and Mars', were immensely popular in his lifetime.

\n", "
" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.10.8" }, "orig_nbformat": 4 }, "nbformat": 4, "nbformat_minor": 2 }