Why Writing HTML is a lot Like Taking Good Notes
Don't worry if you're not very good at either.
Building a web page is kind of like building a house. You use HTML to frame the structure and CSS to design the layout. When you first start using HTML you may struggle with how to connect the concepts to understand the syntax. Syntax has to do with the logic behind why you are building your page the way that you are and choosing a particular tag. If you don’t know what a tag is, it is an element that creates an output indicated with an opening and closing <> (ex:the paragraph tag <p>your text here </P.)
Learning how to code is a lot like learning a new language that thankfully is written in English. It can also be a lot like taking good notes where you take a lot of information and have to structure it in a way that makes sense. There are many tags you can use to do this and I’ve only included a few. There are great online resources that list tags so don’t feel like you have to memorize how to write everyone. I’m going to code a real web page that looks like notes about the Revolutionary War (when we broke up with Britain). This is real code so if you copy my text and save it as a .html file and click open in your default browser it will show you a real web page. Please forgive my notes in the output. Enjoy!
<!DOCTYPE html> <-- This is Syntax to let your browser know this is a web page
<html> <--This indicates the type of code being used
<head> <--This is where you put search engine optimization tags so that google can index/find your site. This is like a library catalogue card for the book you're using to take your notes. Information here doesn't get displayed on the page itself.
<title>Title Goes Here</title> <-- This would be the title of the book you're taking notes on.
</head>
<body> <--Everything inside of this tag is what is displayed on the web page
<header> The Revolutionary War</header> <--This is the page topic. You would put the class name, area of study and date here
<br> <-to skip a line between ideas
<h1> 1776 The Start of America </h1> <-- This is the big picture idea. There should usually only be one <h1> one main idea.
<br> <--to skip a line between ideas
<h2>Important Documents</h2> <-- This a sub heading of <h1> about the start of America. It lists what we did to become a nation separate from Britain
<ul>
<li> The Declaration of Independence</li>
<li> The Article of Confederation</li>
<li> The Constitution</li>
</ul> <--"ul" is defined as an un-ordered list of information because it a list without dates or other numerical values.
* li is defined as each list item
<br> <--to skip a line between ideas
<h3> The Bill of Rights</h3> This a a sub heading of <h2> because the bill of rights is part of the constitution listed above.
<span> Def- The Bill of rights is the first 10 amendments to the constitution.</span>
* a span is used for short text sections like definitions.
<ol>
<li> First, Separation of church and state, freedom of religion, right to assemble and petition the government.</li>
<lil> Second, States have the right to a regulated Militia and people have the right to bear arms.</li>
<li> Third, People are not required to house soldiers in war time.</li>
<li> Fourth, *(footnote) No unlawful search and seizure.</li>
<li> Fifth, You do not have to say anything incriminating</li>
<li> Six, Due process- the right to a speedy public trial</li>
<li> Seventh, Guaranteed trial by jury</li>
<li> Eighth, No cruel or unusual punishment</li>
<li> Ninth, Enumerated rights- basic human rights not expressly stated here are also to be upheld.</li>
<li> Tenth, States rights</li>
</ol> <--ol- is defined as an ordered list where items are sequential.
<footer> <-- This is information take will always display at the bottom of the page like a foot note.
<h4>Footnote</h4> This is a sub header of <h3> because it's a footnote about the fourth amendment.
<p> * "99 problems" by JayZ is a wildly inappropriate song but does explain what to do if you are ever pulled over by the police and don't understand your rights as they apply to the 4th amendment of search and seizure. </p> <--p- paragraph tag used for blocks of text.
</footer>
</body>
</html>
About the Creator
Katherine Nesbitt
I write social commentary in the forms of novels, poetry, short stories, satire, speeches, and will be releasing a poetry audiobook.
Keep reading
More stories from Katherine Nesbitt and writers in 01 and other communities.
What is Cloud Integration and Why is it Important?
Increasingly, more companies are using the cloud to keep data, run applications, and provide services. However, as companies start to use various cloud solutions, it becomes increasingly important to integrate these cloud environments seamlessly with their existing on-premises systems. That's where cloud integration comes in handy.
By Dhruvil Joshi8 days ago in 01
Comments
There are no comments for this story
Be the first to respond and start the conversation.