[basic html/css] 0. introduction

BASIC HTML & CSS0. Introduction

[ 2017.01.03. Tue ]

Introduction

WHY?Why should we study?

WHAT?What do you want to learn?

HTML( HyperText Markup Language )

CSS( Cascading Style Sheets )

HTML Elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <element> <em>

<embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <rtc>

<ruby> <s> <samp> <script> <section> <select> <shadow> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <template> <textarea>

<tfoot> <th> <thead> <time> <title> <tr> <track> <u> <ul> <var> <video> <wbr>



What We Learn

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <element> <em>

<embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <rtc>

<ruby> <s> <samp> <script> <section> <select> <shadow> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <template> <textarea>

<tfoot> <th> <thead> <time> <title> <tr> <track> <u> <ul> <var> <video> <wbr>




To Do

1. Basic Tags○ h1~h6, div, p, span, img, a, strong, b, em, i

2. List tags○ ul li, ol li, dl dt dd

3. Table tags○ table, thead, tbody, tfoot, tr, td, colgroup, col

4. Form tags○ form, fieldset, legend, label, input, select, option, textarea, button

5. Etc○ header, footer, nav, aside, section, article○ iframe, blockquote, ruby, sup, sub, pre, code, mark

To Do

1. Selector, Units, Shorthand○ selector, px, %, em, rem

2. Box model, Display○ box-sizing, display

3. Border, Background○ border, background

4. Text, Font, Web Font○ font-family, font-size, font-weight, color, text-decoration

5. Position, Float○ position, float, clear

6. Inheritance, Cascading, Effect○ inherit, box-shadow, text-shadow, transition, transform, animation, keyframes

Schedule

Schedule (2017.01)

#0. intro

#2. htmllist tag

#4. htmlform tag

#6. css drawing

#7. project

#1. htmlbasic tag

#3. htmltable tag

#5. css

off Korean New Year

Korean New Year

Schedule (2017.02)

#9. project

#13. END

#11. project

#8. project

#10. project

#12. project

off

off

off

Dev. Environment(Browser, Editor, Hosting, FTP)

Browser

chrome

Editors

atom

sublime text brackets webstrom

aptana studio edit plus

Editors

atom

sublime text webstrom

aptana studio edit plus

brackets

Editor - http://brackets.io/

http://brackets.io/

Hosting - http://www.dothome.co.kr/

http://www.dothome.co.kr/

FTP - https://cyberduck.io/

https://cyberduck.io/

Reference

• http://poiemaweb.com/• https://opentutorials.org/module/1892• https://opentutorials.org/module/2367/13339• [Book] Do it! HTML5+CSS3 (2017 Edition)

http://poiemaweb.com/

http://poiemaweb.com/

https://opentutorials.org/module/1892

https://opentutorials.org/module/1892

https://opentutorials.org/module/2367/13339

https://opentutorials.org/module/2367/13339

http://book.naver.com/bookdb/book_detail.nhn?bid=11472743

http://book.naver.com/bookdb/book_detail.nhn?bid=11472743

Facebook / Twitter / Codepen

@zineeworld

[basic html/css] 0. introduction

Technology