HTML

大綱

  • 什麼是HTML
  • HTML TAG
  • HTML 基本架構
    • Lab 1-Your First Web Page
  • ​瀏覽器如何顯示出HTML
  • HTML 常用標籤
    • Lab 2-個人網頁

什麼是HTML

HyperText Markup Language(超文字標示語言)

HyperText 

  • 顯示在電子裝置上內容
  • 超連結

Markup Language

  • 標記最早用於出版業，用於描述排版格式
  • 將文字與其他資訊（ex.結構）寫在一起
  • 有一定的規則，但不會視為一種程式語言

常見的Markup Language-HTML

<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body>
	<p>這是我的第一個網頁</p>
</body>
</html>
My First Web Page
這是我的第一個網頁

常見的Markup Language-XML

ex. SVG-Scalable Vector Graphics

SVG Editor: Inkscape、Illustrator

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="467" height="462">
  <!-- This is the red square: -->
  <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
         stroke="black" stroke-width="2px" />
  <!-- This is the blue square: -->
  <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
         stroke="black" stroke-width="2px" fill-opacity="0.7" />
<rect x="180" y="160" width="250" height="250" rx="40" fill="blue"
         stroke="green" stroke-width="2px" fill-opacity="0.7" />
</svg>

常見的Markup Language-XML

SVG-Try it youself

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="3840"
   height="2160"
   viewBox="0 0 1016 571.49999"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="chocolate.svg"
   inkscape:export-filename="C:\Users\Sam\Desktop\draw\chocolate.png"
   inkscape:export-xdpi="96"
   inkscape:export-ydpi="96">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.168122"
     inkscape:cx="1914.2339"
     inkscape:cy="1142.3434"
     inkscape:document-units="mm"
     inkscape:current-layer="g4384"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     units="px"
     showguides="true"
     inkscape:guide-bbox="true" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="圖層 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,274.49998)">
    <g
       id="g4384"
       transform="rotate(7.1059254,500.3747,-62.843178)">
      <g
         id="g4534"
         transform="matrix(1.725524,0,0,1.725524,98.024836,115.61288)">
        <path
           id="path4386"
           d="M 210.90988,-175.86573 64.341862,30.760991 l 145.565158,46.56625 2.43386,-18.75853 21.38324,-12.72972 4.01768,-20.32986 13.85929,-5.78938 1.14132,-9.8583843 16.4105,-2.0526413 9.87146,8.9996356 13.56844,-3.54559 11.65129,13.36585 25.02555,-1.05673 94.56987,-133.321471 z"
           style="opacity:1;fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.28004897"
           inkscape:connector-curvature="0" />
        <path
           inkscape:connector-curvature="0"
           style="opacity:1;fill:#9c4f32;fill-opacity:1;stroke:none;stroke-width:0.28004897"
           d="M 205.82163,-187.9167 59.25364,18.710024 204.81877,65.27628 l 2.43386,-18.758536 21.38324,-12.729718 4.01768,-20.329865 13.85929,-5.7893767 1.14132,-9.8583831 16.4105,-2.0526416 9.87146,8.999635 13.56844,-3.5455889 11.65129,13.3658533 25.02555,-1.056736 94.56987,-133.321473 z"
           id="rect4120" />
        <g
           id="g4054"
           transform="matrix(0.57158649,0.1828504,-0.36427842,0.51354771,55.493319,-69.268521)"
           style="stroke:none">
          <g
             transform="translate(-18.885099,24.886935)"
             id="g3996"
             style="stroke:none">
            <rect
               style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
               id="rect3911"
               width="92.281464"
               height="92.281464"
               x="93.928986"
               y="-185.31836" />
            <path
               style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
               d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
               id="rect3911-8"
               inkscape:connector-curvature="0"
               sodipodi:nodetypes="cccc" />
            <path
               style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
               d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
               id="path3944"
               inkscape:connector-curvature="0"
               sodipodi:nodetypes="ccccc" />
            <path
               style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
               d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
               id="path3948"
               inkscape:connector-curvature="0" />
          </g>
          <g
             transform="translate(104.41812,24.886935)"
             id="g3996-2"
             style="stroke:none">
            <rect
               style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
               id="rect3911-82"
               width="92.281464"
               height="92.281464"
               x="93.928986"
               y="-185.31836" />
            <path
               style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
               d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
               id="rect3911-8-0"
               inkscape:connector-curvature="0"
               sodipodi:nodetypes="cccc" />
            <path
               style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
               d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
               id="path3944-6"
               inkscape:connector-curvature="0"
               sodipodi:nodetypes="ccccc" />
            <path
               style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
               d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
               id="path3948-2"
               inkscape:connector-curvature="0" />
          </g>
          <g
             transform="translate(227.72134,24.886935)"
             id="g3996-4"
             style="stroke:none">
            <rect
               style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
               id="rect3911-4"
               width="92.281464"
               height="92.281464"
               x="93.928986"
               y="-185.31836" />
            <path
               style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
               d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
               id="rect3911-8-5"
               inkscape:connector-curvature="0"
               sodipodi:nodetypes="cccc" />
            <path
               style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
               d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
               id="path3944-7"
               inkscape:connector-curvature="0"
               sodipodi:nodetypes="ccccc" />
            <path
               style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
               d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
               id="path3948-8"
               inkscape:connector-curvature="0" />
          </g>
        </g>
        <g
           style="stroke:none"
           transform="matrix(0.57158649,0.1828504,-0.36427842,0.51354771,86.320239,-131.39812)"
           id="g4064">
          <rect
             style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
             id="rect4056"
             width="92.281464"
             height="92.281464"
             x="93.928986"
             y="-185.31836" />
          <path
             style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
             d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
             id="path4058"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="cccc" />
          <path
             style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
             id="path4060"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="ccccc" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
             id="path4062"
             inkscape:connector-curvature="0" />
        </g>
        <g
           style="stroke:none"
           transform="matrix(0.57158649,0.1828504,-0.36427842,0.51354771,156.79869,-108.85208)"
           id="g4074">
          <rect
             style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
             id="rect4066"
             width="92.281464"
             height="92.281464"
             x="93.928986"
             y="-185.31836" />
          <path
             style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
             d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
             id="path4068"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="cccc" />
          <path
             style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
             id="path4070"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="ccccc" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
             id="path4072"
             inkscape:connector-curvature="0" />
        </g>
        <g
           style="stroke:none"
           transform="matrix(0.57158649,0.1828504,-0.36427842,0.51354771,227.27715,-86.306033)"
           id="g4084">
          <rect
             style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
             id="rect4076"
             width="92.281464"
             height="92.281464"
             x="93.928986"
             y="-185.31836" />
          <path
             style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
             d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
             id="path4078"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="cccc" />
          <path
             style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
             id="path4080"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="ccccc" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
             id="path4082"
             inkscape:connector-curvature="0" />
        </g>
        <g
           transform="matrix(0.57158649,0.1828504,-0.36427842,0.51354771,-15.054079,11.516044)"
           id="g4096"
           style="stroke:none">
          <rect
             style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
             id="rect4088"
             width="92.281464"
             height="92.281464"
             x="93.928986"
             y="-185.31836" />
          <path
             style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
             d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
             id="path4090"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="cccc" />
          <path
             style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
             id="path4092"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="ccccc" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
             id="path4094"
             inkscape:connector-curvature="0" />
        </g>
        <g
           transform="matrix(0.57158649,0.1828504,-0.36427842,0.51354771,55.424377,34.062087)"
           id="g4106"
           style="stroke:none">
          <rect
             style="opacity:1;fill:#8c462d;fill-opacity:1;stroke:none;stroke-width:0.16478831"
             id="rect4098"
             width="92.281464"
             height="92.281464"
             x="93.928986"
             y="-185.31836" />
          <path
             style="opacity:1;fill:#d2896f;fill-opacity:1;stroke:none;stroke-width:0.13632229"
             d="m 113.22158,-101.00726 h 65.01843 l -1.05978,-63.6234 c -20.70677,21.15402 -40.26562,42.26325 -63.95865,63.6234 z"
             id="path4100"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="cccc" />
          <path
             style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.19678037px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 93.928966,-93.036896 19.306284,46.330304 H 216.9014 l -30.69098,-46.330304 z"
             id="path4102"
             inkscape:connector-curvature="0"
             sodipodi:nodetypes="ccccc" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.17816986px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 216.90141,-150.37274 -30.69099,-34.94563 v 92.281466 l 30.69097,46.330312 z"
             id="path4104"
             inkscape:connector-curvature="0" />
        </g>
        <path
           inkscape:connector-curvature="0"
           id="path4390"
           d="M 209.90702,77.327253 204.81877,65.276285 59.253638,18.710029 64.34186,30.760997 Z"
           style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           inkscape:connector-curvature="0"
           id="path4392"
           d="m 329.26964,25.571891 -5.08825,-12.050968 94.56988,-133.321463 5.08824,12.05097 z"
           style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           inkscape:connector-curvature="0"
           id="path4394"
           d="m 212.34088,58.568719 -5.08825,-12.050967 21.38324,-12.729721 5.08825,12.050968 z"
           style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           inkscape:connector-curvature="0"
           id="path4406"
           d="M 251.60109,19.71976 246.51284,7.6687925 232.65355,13.45817 237.7418,25.509126 Z"
           style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           inkscape:connector-curvature="0"
           id="path4414"
           d="m 269.15291,7.8087348 -5.08825,-12.0509676 9.87145,8.9996363 5.08827,12.0509655 z"
           style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           inkscape:connector-curvature="0"
           id="path4446"
           d="m 304.2441,26.628635 -5.08825,-12.050968 25.02554,-1.056744 5.08825,12.050968 z"
           style="fill:#67422f;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <g
           transform="matrix(1.3752497,-0.04534538,-0.04534538,1.0171548,-82.806732,4.9230049)"
           id="g4460">
          <path
             inkscape:connector-curvature="0"
             id="path4440"
             d="M 245.65103,68.931953 258.62692,65.071482 256.51714,79.6327 Z"
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
          <path
             style="fill:#9c4f32;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 244.41939,64.512815 12.97589,-3.860471 -2.10978,14.561218 z"
             id="path4432"
             inkscape:connector-curvature="0" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 244.41939,64.512815 1.23164,4.419135 10.86611,10.700748 -1.23164,-4.419136 z"
             id="path4448"
             inkscape:connector-curvature="0" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 257.39528,60.652344 1.23164,4.419136 -2.10978,14.561218 -1.23164,-4.419136 z"
             id="path4450"
             inkscape:connector-curvature="0" />
        </g>
        <g
           transform="matrix(1.2684691,-0.02688759,-0.02688759,1.0561364,-97.941001,-21.42095)"
           id="g4465">
          <path
             inkscape:connector-curvature="0"
             id="path4442"
             d="m 278.19967,65.174648 c 1.06985,-0.413706 14.80511,-4.92954 14.80511,-4.92954 l 2.92976,10.007982 -9.1798,2.826491 z"
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
          <path
             style="fill:#9c4f32;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 278.41004,60.555823 c 1.06985,-0.413706 14.80511,-4.92954 14.80511,-4.92954 l 2.92976,10.007982 -9.1798,2.826491 z"
             id="path4436"
             inkscape:connector-curvature="0" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 278.41004,60.555823 -0.21037,4.618842 8.55507,7.904934 9.1798,-2.826492 0.21037,-4.618842 -9.1798,2.826491 z"
             id="path4452"
             inkscape:connector-curvature="0" />
        </g>
        <g
           transform="matrix(1.3711325,-0.02569542,-0.02569542,1.1682144,-135.16154,-15.746459)"
           id="g4470">
          <path
             inkscape:connector-curvature="0"
             id="path4444"
             d="m 309.1027,58.939202 7.56003,-9.072806 7.65806,7.456058 -4.00486,6.106374 z"
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
          <path
             style="fill:#9c4f32;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 307.91515,55.475894 7.56003,-9.072806 7.65806,7.456058 -4.00486,6.106374 z"
             id="path4438"
             inkscape:connector-curvature="0" />
          <path
             style="fill:#542b1a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
             d="m 307.91514,55.475909 1.18756,3.463291 11.21323,4.489626 4.00486,-6.106374 -1.18756,-3.463292 -4.00486,6.106375 z"
             id="path4454"
             inkscape:connector-curvature="0" />
        </g>
      </g>
    </g>
  </g>
</svg>

https://svgtopng.com/

?

常見的Markup Language-XML

SVG-Try it youself

https://svgtopng.com/

HTML TAG

start tag : <p>

end tag : </p>

Attribute(用雙引號包起來) :

<img src="/images/chocolate.phg">

HTML 基本架構

<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body>
	<p>這是我的第一個網頁</p>
</body>
</html>

<!DOCTYPE html> : 這是一份HTML5的文件

  • HTML有不同版本的標準
  • 不加這一行的話瀏覽器可能會用不如你預期的方式呈現
  • 不需要end tag

<html></html> : HTML的根元素(root element)

<head></head> : 放置不會直接顯示於頁面中的東西，例如:meta、script、title......

<title></title> : 網頁標題

<p></p>: paragraph，放置文字段落

<body></body> : 放置顯示於頁面中的東西

Lab 1-Your First Web Page

  1. 打開文字編輯器(記事本、Sublime、Notepad++、Atom、VSCode....)
  2. 貼上下方程式碼，並嘗試改掉<title>及<p>的內容
  3. 存檔為first.html
  4. 使用瀏覽器打開
<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body>
	<p>這是我的第一個網頁</p>
</body>
</html>

Lab 1-Your First Web Page

瀏覽器如何顯示出HTML

  1. HTML解析成DOM Tree
  2. 建構Render tree(帶有顏色、尺寸等)
  3. 排版render tree各節點的位置
  4. 繪製出來

HTML 常用標籤

  • 標題:<h1> ~ <h6>
  • 段落:<p>
  • 清單:<ul>、<ol>、<li>
  • 其他文字標籤
  • 圖片標籤:<img>
  • 連結標籤:<a>
  • 註解:<!-- -->
  • 區塊標籤: <div>

標題:<h1> ~ <h6>

heading

段落:<p>

paragraph

清單:<ul>、<ol>、<li>

<ul> : unordered list

<ol> : ordered list

<li> : a list item

<ul>
	<li>青菜</li>
	<li>蘿蔔</li>
	<li>土豆</li>
</ul>

<ol>
	<li>早上起來</li>
	<li>刷刷牙</li>
	<li>看到了妹妹在洗澡</li>
</ol>

其他文字標籤

<strong> : Important text (粗體)
 <em> : Emphasized text (斜體)
<u> : Underlined text
<br> : line break

<strong>我是strong</strong>
<em>我是em</em>
<u>我是u</u>
<p>野<br>格<br>炸<br>彈<br></p>

圖片標籤:<img>

image

src : img標籤的attribute，代表圖片來源，可為電腦路徑或是url

<img src="pictures/chocolate.png">
<img src="https://cdn.pixabay.com/photo/2016/04/01/10/16/bar-1299829_960_720.png">

連結標籤:<a>

Link

attribute: href，hypertext reference

放置目標連結

<a href="http://web.lins.fju.edu.tw/chi/">輔大圖資系網</a>

註解:<!-- -->

開頭: <!--

結尾: -->

裡面的內容會被忽略

<!-- 這裡面的東西全不都不會顯示出來，你要怎麼打都可以 -->

區塊標籤 <div>

division: 分隔區塊用

<div style="background-color:red; width:100px; height:100px; "></div>
<div style="background-color:blue; width:100px; height:100px; clear:left;"></div>
<div style="background-color:yellow; width:100px; height:100px; clear:left;"></div>

Lab 2-個人網頁

條件1: title為你的英文名字 + 's page

條件2: 使用<h1>輸入標題「xxx的個人網頁」

條件3: 使用<h2>寫上「我的大頭貼」作為標題，加上一張代表你自己的照片(如果太大的話，在attribute中加上這段「style="width:300px;"」)

條件4: 使用<h2>寫上「我是誰?」作為標題，並用<p>寫出你的名字、系級、就讀學校

條件5: 使用<h2>寫上「我的專長」作為標題，並用<ol>列出你的3個專長，以熟悉程度排序

條件6: 使用<h2>寫上「我的興趣」作為標題，並用<ul>列出你的3個興趣

條件7: 使用<a>在就讀學校上加上輔大官網連結

Lab 2-個人網頁

學習HTML可用資源 

https://www.w3schools.com/default.asp

https://www.freecodecamp.org/

FIN

HTML

By Sam Yang

Made with Slides.com

HTML

  • 574

More from Sam Yang