HTML editor apps
: Sublime Text (personally recommend this app / available in MacOS), WebMaster's HTML Editor Lite, AWD, DroidEdit, etc
Very first steps to start html (on Mac)
Launchpad > Open 'TextEdit' > Create new document > Change the name of file as 'index.html' (it's fine to leave the document blank) > Go to 'Finder' > Click the file > Click 'Action' (at the top of a Finder window) > Click 'Open with' > Select 'Sublime Text'
Basic code to run the html code
*tag: <head> abcd </head>
- keywords which defines that how web browser will format and display the content
- HTML tags contain three main parts: opening tag, content and closing tag (never forget typing closing tag!)
- .abcd in css part (style tag) is associated with <div class="abcd"> ... </div> in html part (body tag)
Basic ten tags of html
- <html> … </html> | The root element
- <head> … </head> | The document head
- <title> … </title> | The page title
- <body> … </body> | The page's content
- <h1> … </h1> | A section heading.
- <p> … </p> | A paragraph
- <a> … </a> | A link -- ex) <a href="(type the link you want to link)"> (description of the link) </a>
- <img> | An image (this tag doesn't have a closing tag) -- ex) <img src="(name of the photo.jpg/png)" width="200" height="200">
You can add more effects on your tags
Code 1
<a> Hwayeon Kang </a>
Result 1
Hwayeon Kang
Code 2
<p style="color: blue;"> Hwayeon Kang </p>
Result 2
Hwayeon Kang
Additional useful tags
- <span> ... </span> wrap the entire text in the file
- <table> ... </table> provide the layout
- <i> ... </i> italicize the text
- <strong> ... </strong> put the text into bold
- <ul> ... </ul> posts the limits with bullets on the website
- <li> ... </li> pass a list inside a list
** ul and li tags are often used as together like the following example
- fictional
- classic
- mystery
For more tags, visit https://www.w3schools.com/tags/default.asp
HTML Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
If you cannot understand this post, I recommend you to watch this youtube video.
'Language > HTML CSS' 카테고리의 다른 글
| How to publish my html file on the internet (0) | 2022.08.18 |
|---|---|
| First web publication -- http://hwayeonniii.com (0) | 2022.01.15 |