HTML入門 第1回
  • Webページを設計する方法
  • Webサイト制作の言語、HTMLとは
  • Webページがブラウザに表示される仕組み
  • HTML制作に必要なアプリケーションをインストールする方法
  • HTMLファイルを新規作成する方法
  • ゼロから学ぶHTMLタグの書き方入門
  • [実践]HTMLを書いてみよう:簡単なテキストのマークアップ
  • HTMLファイルをブラウザで表示させるには
  • Web製作者が知っておくべき、ブラウザの種類と特徴
HTML入門 第2章
  • HTML5を宣言するDOCTYPEの書き方
  • HTMLの基本構造を記述する方法
  • 文字エンコードの種類と記述方法
  • Webページにタイトルを付けるタグの書き方</li> <li>Webサイトの情報を示す<meta>タグの書き方</li> <li>見出しである事を示す<h1>の書き方</li> <li>段落である事を示す<p>タグの書き方</li> <li>画像を表示するための<img>タグの書き方</li> <li>タグに情報を付加するための属性の書き方</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>HTML入門 第3回 </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>文字の色を変える、属性の書き方</li> <li>レイアウトのためのタグを記述してみよう</li> <li>リストタグを使ってナビゲーションを作ってみよう</li> <li>メイン画像を表示させてみよう</li> <li>コンテンツをマークアップしてみよう</li> <li>フッターをマークアップしてみよう</li> <li>CSSファイルを読み込む<link>タグの記述方法</li> <li>コメントアウト<!-- -->を書く方法</li> <li>[実践]アバウトページを作ってみよう</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>フォーム </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>フォームを作成するための<form>タグの書き方</li> <li><input>タグでテキスト入力フォームを作る方法</li> <li><textarea>タグで長文向けフォームを作成する方法</li> <li><input>タグで送信・リセットボタンを作る方法</li> <li><label>タグでフォームにラベルを付ける方法</li> <li><fieldset>タグでフォームをグループに分ける方法</li> <li><select>タグでセレクトメニューを作る方法</li> <li><radio>タグでラジオボタンを作る方法</li> <li><input>タグでチェックボックスを作る方法</li> <li>[チャレンジ]フォームに関するタグを使って、ログインページを作ろう!</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>テーブル </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>テーブルを作成するための<table>タグの書き方</li> <li>テーブルに項目名を設定する<th>タグの書き方</li> <li>テーブルに説明を加える3つのタグの書き方</li> <li>行をグループ化する3つのタグの書き方</li> <li>隣り合う複数のセルを結合させるタグの書き方</li> <li>[チャレンジ]テーブルタグを使って、企業概要ページを作ろう!</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>テキストとリスト </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>見出しをつける<h1>~<h6>の書き方</li> <li>段落<p>タグと改行<br>タグの書き方</li> <li>語句を強調、ハイライト表示させるタグの書き方</li> <li>引用するときの<blockquote>タグの書き方</li> <li>改行や余白をそのまま表示させる<pre>タグの書き方</li> <li>連絡先や問合せ先、省略文字、改行位置を示す方法</li> <li>箇条書きリストを作成する方法</li> <li>定義型リストを作成する方法</li> <li>文字構造を意識したHTMLテキストのマークアップをしてみよう</li> <li>[チャレンジ]テキスト系タグを使った、カフェメニューページを作ろう!</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>リンクと画像・動画・オーディオ </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>指定のページへリンクさせる<a>タグの書き方</li> <li>指定のHTMLファイルへリンクさせる<a>タグの書き方</li> <li>ページ内ジャンプさせるリンクの書き方</li> <li>画像を表示する<img>タグの書き方</li> <li>横罫線を表示する<hr>タグの書き方</li> <li>youtube動画をサイトに埋め込む方法</li> <li>ページの中に別のページを表示させる<iframe>の書き方</li> <li>google mapを表示させる方法</li> <li>[チャレンジ]youtube動画を使った、映画情報サイトを作ろう!</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>HTMLテクニック </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>リンクのクリックでメールソフトを起動させる方法</li> <li>件名や本文を入力している状態でメールソフトを起動させる方法</li> <li>ユーザーに親切なお問い合わせメールを作成してみよう</li> <li>ファビコンを設定する方法</li> <li>サイトでPDFファイルをダウンロードさせる方法</li> <li>秒数を指定して自動的に特定のページへジャンプさせる方法</li> <li>[チャレンジ]素材ダウンロードサイトを作ってみよう</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>要素のセクショニング </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Webページレイアウトの基礎を学ぼう</li> <li>ヘッダーとナビゲーションを作成する方法</li> <li>メインコンテンツ、サイドバー、フッターの作成方法</li> <li>Webサイト全体を真ん中寄せにするためのタグの記述方法</li> <li>sectionタグとarticleタグの違い</li> <li>[チャレンジ]文書構造を意識した正しいグルーピングをしてみよう</li> </ul> </div> </div> </div> </div> </div><!-- Fin Contenido del curso --> <!-- Información sobre el Instructor --> <div class="container clearfix" style="padding-top: 150px;"> <div id="instructor"></div> <div class="title-left"> <h3 class="t300">講師のプロフィール</h3> </div> <div class="col_one_fourth"> <img style="border: 1px solid #dedfe0; border-radius: 50%;" src="https://img-a.udemycdn.com/user/100x100/4332006_ebb4.jpg" alt="Netcurso-Instructores"><br> <ul style="font-size: 18px;" class="iconlist topmargin-sm"> <li style="margin-bottom: 10px;"><i class="icon-star3"></i><div class="t300"><strong>4.21</strong> Calificación</div></li> <li style="margin-bottom: 10px;"><i class="icon-user4"></i><div class="t300"><strong>46628</strong> Estudiantes</div></li> <li style="margin-bottom: 10px;"><i class="icon-play"></i><div class="t300"><strong>8</strong> Cursos</div></li> </ul> </div> <div class="col_three_fourth col_last"> <h4 class="t300" style="color: #007791">NEST online</h4> <h5 class="t400" style="font-size: 16px;" >ウェブデザイン / プログラミング</h5> <div class="descri"><p>テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。</p><p>卒業生は1000名以上です。</p><p><br style=""></p><p><strong style="">★提供しているサービス</strong></p><p><strong style="">2ヶ月のWebデザインコース</strong></p><p><span class="strong">2ヶ月</span>で<span class="strong">未経験</span>から<span class="strong">Webデザイナー</span>へ。<br style="">未経験から<span class="color">WEBデザイナーとして働けるレベルになる</span>ことをゴールとした<span class="color">大学生や若手社会人向けのコース</span>です</p><p><br style=""></p><p><strong style="">Webデザインキャンプ</strong></p><p>【2日間で全てを学ぶ!】Webデザイン集中講座</p><p><br style=""></p><p><strong style="">Railsキャンプ</strong></p><p>RailsCamp -2日間集中プログラミング入門講座-</p><p><br style=""></p><p>など</p><p><br style=""></p></div> </div> <div class="clear"></div> <div class="title-left"> <h3 class="t300">受講生からのフィードバック</h3> </div> <div class="col_one_fourth"> <div class="t300" style="font-size: 80px;">3.85</div> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star-half-full"></i> <i style="color:#DEDFE0; font-size: 30px;" class="icon-star3"></i> <h5 class="t300" style="font-size: 17px;">コース評価</h5> </div> <div class="col_three_fourth col_last"> <h5 class="t400" style="font-size: 16px;" >レビュー</h5> <hr style="color: #0056b2;" /> <div class="t300" style="font-size: 17px;"> m f <div style="color:gray; font-size: 12px;">29-05-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#DEDFE0; font-size: 18px;" class="icon-star3"></i> <i style="color:#DEDFE0; font-size: 18px;" class="icon-star3"></i> <br>講義内で「開いてください」と指示される場面で、その参照すべきデータがすでに削除済み?なのか、閲覧も使用もできないのがちょっと・・・。<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> 荒川英樹 <div style="color:gray; font-size: 12px;">28-05-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star-half-full"></i> <br>内容はとても良いです。わかりやすいです、サクサク進めました。しかし、サンプルが何もないので、いちいち 手書きで写したり、画像を用意したりでちょっと面倒でした。<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> 足立邦夫 <div style="color:gray; font-size: 12px;">19-05-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star-half-full"></i> <br>解説自体はとても良いのですが、素材データがダウンロードできませんのでやり難いです。が、コードの設定方法を覚える目的なら今のところ理解の障害になっていません。<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> yamada kayoko <div style="color:gray; font-size: 12px;">14-05-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <br>非常に丁寧に解説され、初心者向けの内容です。<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> Nishimura Hiroto <div style="color:gray; font-size: 12px;">03-05-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#DEDFE0; font-size: 18px;" class="icon-star3"></i> <i style="color:#DEDFE0; font-size: 18px;" class="icon-star3"></i> <br>youtubeやgooglemapの埋め込みテクニックが知れてよかった。<hr style='color: #0056b2;' /> <div class="t300" style="font-size: 17px;"> D 4 <div style="color:gray; font-size: 12px;">20-04-2020</div> </div> <br> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 18px;" class="icon-star-half-full"></i> <br>非常に丁寧に説明してくれているのでわかりやすいと思います。また、なにより声が綺麗なので凄く聞きやすかったです。<hr style='color: #0056b2;' /> </div> <div class="clear"></div> <div class="topmargin"> <center> <a href="https://click.linksynergy.com/link?id=re1xT8rhYck&offerid=507388.642146&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fhtml5-master%2F" target="_blank" ><button type="button" class="btn btn-dark">コース内容を確認</button></a> <br><br> <span>in</span> <br> <img src="//files.netcurso.net/images/udemy.png" height="50" > </center> </div> </div><!-- Fin Información sobre el Instructor --> </div> </section> <!-- FIN Content --> <!-- Footer ============================================= --> <footer id="footer" class="topmargin noborder dark" style="background-color: #4d4d4d;"> <div class="container clearfix"> <!-- Footer Widgets ============================================= --> <div class="footer-widgets-wrap clearfix"> <div class="col_one_fourth"> <div class="widget clearfix"> <div class="t400 ls1 lowercase nobottommargin" style="font-size: 36px; letter-spacing: -1px"><i>n</i>c</div> <p class="t300">@2020</p> <abbr title="Email Address">Email:</abbr> info@netcurso.net </div> </div> <div class="col_one_fourth"> <div class="widget widget_links clearfix"> <h4></h4> <ul> <li><a href="//netcurso.net/ja/#categorias">カテゴリー</a></li> <!--<li><a href="//netcurso.net/ja/us">About</a></li>--> </ul> </div> </div> <div class="col_one_fourth"> <div class="widget widget_links clearfix"> <h4></h4> <ul> <!--<li><a href="//netcurso.net/ja/faqs">FAQs</a></li> <li><a href="//netcurso.net/ja/contact">Contact</a></li>--> </ul> </div> </div> <div class="col_one_fourth col_last"> <div class="widget widget-twitter-feed clearfix"> <a href="https://www.instagram.com/netcurso/" target="_blank" class="social-icon si-rounded si-instagram"> <i class="icon-instagram"></i> <i class="icon-instagram"></i> </a> <a href="https://www.facebook.com/NetCurso/" target="_blank" class="social-icon si-rounded si-facebook"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a><a href="https://youtube.com/netcurso" target="_blank" class="social-icon si-rounded si-youtube"> <i class="icon-youtube"></i> <i class="icon-youtube"></i> </a> <!--<a href="#" class="social-icon si-rounded si-twitter"> <i class="icon-twitter"></i> <i class="icon-twitter"></i>--> </a> <a href="//netcurso.net/ja/contact" class="social-icon si-rounded si-email3"> <i class="icon-email3"></i> <i class="icon-email3"></i> </a> <nav id="primary-menu" class="with-arrows fnone clearfix"> <ul> <li><a href="#"><div style="color: white">JA</div></a> <ul> <li><a href="//netcurso.net/"><img src="//files.netcurso.net/images/icons/flags/espanol.png" alt="Spanish"> ES</a></li> <li><a href="//netcurso.net/en/"><img src="//files.netcurso.net/images/icons/flags/usa.png" alt="usa"> ES</a></li> <li><a href="//netcurso.net/fr/"><img src="//files.netcurso.net/images/icons/flags/french.png" alt="French"> FR</a></li> <li><a href="//netcurso.net/it/"><img src="//files.netcurso.net/images/icons/flags/italian.png" alt="Italian"> IT</a></li> <li><a href="//netcurso.net/de/"><img src="//files.netcurso.net/images/icons/flags/german.png" alt="German"> DE</a></li> <li><a href="//netcurso.net/pt/"><img src="//files.netcurso.net/images/icons/flags/portugal.png" alt="portugal"> PT</a></li> <li><a href="//netcurso.net/tr/"><img src="//files.netcurso.net/images/icons/flags/turky.png" alt="portugal"> TR</a></li> </ul> </li> </ul> </nav> </div> </div> </div><!-- .footer-widgets-wrap end --> </div> <div class="line nomargin"></div> <!-- Copyrights ============================================= --> <div id="copyrights" class="" style="background-color: #FFF;"> <div class="container clearfix"> <div class="col_full center nomargin"> <span style="color: #4d4d4d">著作権 © 2020 Netcursoが留保するすべての権利</span><br> <span style="color: #4d4d4d" ><i class="icon-line2-pointer"></i> 愛をこめて、ベネズエラから</span><br> <a target="_blank" href="https://www.bible.com/bible/1820/MAT.6.33.%E5%8F%A3%E8%AA%9E%E8%A8%B3"><span style="color:#ADA7A7">マタイによる福音書 6:33</span></a> </div> </div> </div><!-- #copyrights end --> </footer><!-- #footer end --> </div><!-- #wrapper end --> <!-- Go To Top ============================================= --> <div id="gotoTop" class="icon-long-arrow-up"></div> <!-- External JavaScripts ============================================= --> <!-- External JavaScripts ============================================= --> <script src="//files.netcurso.net/js/jquery.js"></script> <script src="//files.netcurso.net/js/plugins.js"></script> <!-- Bootstrap Typeaheadjs Plugin --> <script src="//files.netcurso.net/js/typehead.js"></script> <!-- Footer Scripts ============================================= --> <script src="//files.netcurso.net/js/functions.js"></script> <script> var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = ['Adobe', 'After Effects', 'Ajax', 'Aleman', 'Amazon', 'Amazon Web Services', 'Análisis de datos', 'Angular', 'Animación 3D', 'Aplicaciones', 'Apps', 'Arte y Creatividad', 'Autocad', 'Autocad Esencial 2D', 'Autocad Intermedio 3D', 'Autocad Productivo Render', 'Automatización', 'AWS', 'Baile', 'Base de datos', 'Belleza y Maquillaje', 'Big Data', 'Blender', 'Bootstrap', 'Branding', 'Catia', 'Centos', 'Certificación', 'Cloud computing', 'Comida y bebidas', 'Comunicación', 'Comunity manager', 'Corel Draw', 'css3', 'Deep learning', 'Desarrollo', 'Devops', 'Diseño', 'Diseño Arquitectónico', 'Drive', 'Docker', 'eCommerce', 'Educación', 'Emprendedor', 'Español', 'Excel', 'Finanzas', 'Fitness', 'Fotografia', 'Frances', 'Google', 'Hardware', 'Hogar', 'Html', 'Idiomas', 'Illustrator', 'Industria', 'Ingenieria', 'Ingles', 'Inventor', 'Java', 'Javascript', 'Jenkins', 'Juegos', 'Keynote', 'Kubernetes', 'Lamp', 'Linux', 'Machine learning', 'Marca', 'Marketing', 'Microsoft', 'Microsoft Project', 'Moda', 'MongoDB', 'Musica', 'Mysql', 'Negocios', 'Netcurso', 'NodeJS', 'Numbers', 'Nutricion', 'Oracle', 'Pages', 'Photoshop', 'PHP', 'PostgreSQL', 'Powerpoint', 'Premier', 'Programación', 'Programador', 'Proyectos', 'Publicidad', 'Python', 'Redes', 'Revit', 'Salud', 'SAP', 'Seguridad', 'Sistemas operativos', 'Sketchup', 'Social media', 'Software', 'Solidworks', 'Soluciones nube', 'Ubuntu', 'Ventas', 'Viajes', 'Videos', 'Web', 'Word', 'Wordpress', 'Yoga', ]; $('.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); </script> <!-- OFERTAS --> <script type="text/javascript"> if (!sessionStorage.cajaOfertasU) { var mensaje = "⭐ オンラインコース通知、<a href='https://mailchi.mp/bea451e1c987/landing' class='alert-link' target='_blank'> オファー、プロモーション、無料クーポン! <i class='icon-circle-arrow-right ml-2'></i></a>"; document.getElementById("cajaofertas").innerHTML="<div class='alert alert-info text-center fade show' role='alert' style='margin-bottom: 0rem;'>"+ mensaje +"<button type='button' class='close' data-dismiss='alert' aria-label='Close' onclick='nomasOfertas()' ><span aria-hidden='true'>×</span></button></div>" } function nomasOfertas() { sessionStorage.cajaOfertasU = 'true'; } </script> </body> </html>